useState not working with v-if when value set in watch statement

Environment

Nuxt project info: 17:40:50

---

• Operating System: Linux
• Node Version: v16.16.0
• Nuxt Version: 3.0.0
• Nitro Version: 1.0.0
• Package Manager: yarn@1.22.19
• Builder: vite
• User Config: telemetry, runtimeConfig, css, build, vite
• Runtime Modules: -
• Build Modules: -

Reproduction

use useFetch then watch, in watch affet a boolean in a useState command, then in a component try to use the value in v-if statement => note working

index.vue (or any name)

<template>
	<div>
		<button @click='onSubmit'>CLICK</button>
	</div>

</template>

<script lang="ts" setup>

	function onSubmit() {

		const {data: status} = useFetch('https://httpbin.org/get')

		watch(status, (newStatus) => {

			console.log('call ok')

				if(newStatus){
					useState('test', ()=>'test');
                                        useState('isConnected', ()=>true);
				}
			
			},{
				deep: true,
				immediate:true
			}
		)

}

</script>

in component (Menu.vue)

<template>
	<div>
				<NuxtLink to="/" src>
					HOME
				</NuxtLink>
<div>
			{{test}}  {{isConnected}} Application des commandes

</div>

				<button v-if="isConnected" @onclick="logout()">LOGOUT</button>
				<button v-else href="/login">LOGIN</button>

	</div>
</template>

<script script="ts" setup>

const isConnected = useState('isConnected');
const test  = useState( 'test' );
console.log( isConnected );

</script>

then just create a default layout pu menu into and

Describe the bug

When we click on button , on the menu in the vif part nothing happen, if we delete the watch part, it will work

Additional context

No response

Logs

no error only my log write the object

isConnected?                                                                                                                                                                    12:47:30
ObjectRefImpl {                                                                                                                                                                 12:47:30
  _object: {},
  _key: '$sisConnected',
  _defaultValue: undefined,
  __v_isRef: true
}

[leccyril]

so after talking with vuetify developers don’t use v-text in button and it is OK

[leccyril]

ok so finally i could reproduce exactly :

https://stackblitz.com/edit/github-q97ggk

to make it work (as it should work) just rename the file called vuetify.ts in plugins directory

with the file the v-if is not working in any tag

without vuetify plugin it is working

In this exemple clicking on the button make a rest call api, in the result of the watch set var with useState, and update value used in component, i added in a simple bracket to see that is working , but not with the v-if statement