(vue) useChat not responsive to changes in the conversation ID

[pqnet]

Description

In Vue it is impossible to change id for useChat component based on a prop value (or a route parameter), since properties are reactive and id value must be fixed at setup stage.

Code example

// App.vue
<script setup lang="ts">
import Chat from "./components/Chat.vue";
import { ref } from "vue";
const chatId = ref("123");
</script>

<template>
  <input v-model="chatId" type="number" />
  <p>
    {{ chatId }}
  </p>
  <Chat :chatId />
</template>

// Chat.vue
<template>
  <p>{{ chatId }}</p>
  <p>{{ id }}</p>
</template>
<script setup lang="ts">
import { useChat } from "@ai-sdk/vue";
const props = defineProps<{ chatId: string }>();
const { id } = useChat({ id: props.chatId });
</script>

AI provider

No response

Additional context

Differently from React, the setup function is not re-executed every time props change, but rather the properties themselves are reactive.

The standard pattern for Vue composables that have to react to their input is to accept a MaybeRef<T> as a parameter and use computed/watch/watchEffect to handle changes to the parameter, rather than rely on useChat being invoked again when they change.