Using args/controls to change vue's local state

I was under the impression that with storybook 6 I can change values in vue's data() property without my component using props. I Use TS and have declared two data properties: userMenuOpen and text. The code below reflects what i want to do. If it's not possible like with 5 I misunderstood.

Vue, typescript, storybook 6

Component:

export default class TopNavBar extends Vue {
  userMenuOpen: boolean = false;
  text: string = 'hello';
}

Story:

export default {
  title: 'nav/TopNavBar',
  excludeStories: /.*Data$/,
  decorators: [StoryRouter()],
  component: TopNavBar,
  argTypes: {
    userMenuOpen: { control: 'boolean' },
    text: { control: 'text' },
  },
};

const Template = (args: any, { argTypes }: any) => ({
  components: { TopNavBar },
  data() {
    return {
      userMenuOpen: args.userMenuOpen,
      text: args.text,
    };
  },
  template: '<top-nav-bar  />',
});

export const Rounded = Template.bind({});
Rounded.args = {
  userMenuOpen: true,
  text: 'A different text',
};