Can I pass Ref to modelValue to enable two-way binding?

[Maxim-Mazurok]

We used to have this to get type-safe two-way binding:

modelValue={activeContentDefinitionTabIndex.value}
onUpdate:modelValue={(tabIndex) => (activeContentDefinitionTabIndex.value = tabIndex)}

And just discovered that passing a Ref also seems to work the same way:

modelValue={activeContentDefinitionTabIndex}

Full component:

import { storeToRefs } from "pinia";
import { defineComponent } from "vue";
import { RouterView } from "vue-router";
import { VTabs } from "vuetify/components";
import { useLibraryStore } from "../../stores/library";

export const ContentDefinitionTab = defineComponent({
  name: "ContentDefinitionTab",
  setup() {
    const library = useLibraryStore();
    const { activeContentDefinitionTabIndex } = storeToRefs(library);

    return () => (
      <div>
        <h1>activeContentDefinitionTabIndex = {activeContentDefinitionTabIndex.value}</h1>
        <VTabs modelValue={activeContentDefinitionTabIndex} />
        <RouterView />
      </div>
    );
  },
});

Would this be considered an expected behavior? I wouldn't expect Vuetify to attempt changing modelValue that I'm passing, I thought that it will only emit onUpdate events. However I can certainly see that tab index is updating.

I'm not sure if it's a bug or a feature?...

[velly]

That's weired. You could define a type-safed props interface?

[Maxim-Mazurok]

Well yeah, that seems like React way of doing things. But now that we have Refs in vue this also seems like a working option? Are there any particular reasons you think it's weird?

[KaelWD]

It isn't intentional but I guess it's because we pass the initial value of the prop to another ref here

vuetify/packages/vuetify/src/composables/proxiedModel.ts

Line 26 in 47ac84c

const internal = ref(props[prop] !== undefined ? props[prop] : defaultValue) as Ref<Props[Prop]>

then assign to it

vuetify/packages/vuetify/src/composables/proxiedModel.ts

Line 60 in 47ac84c

internal.value = newValue

ref(someRef) just returns someRef

Is this actually type safe? I don't imagine a string prop accepting Ref. I did bring this up with the vue devs a couple years ago about adding v-model types for jsx but it never went anywhere as it would conflict with the way volar handles it.