How can watch computed value in setup function of Vuejs3 - vue.js

Question

I am developing a Vue project with Vuex and Vue 3.
I have a serious problem with my code.
<template>
<div class="px-2 pt-3 text-left">
<div class="flex justify-between items-center">
<h3 class="text-red-700 font-bold text-sm">Texts</h3>
</div>
<div class="mt-4">
<p class="text-sm">Title</p>
<div class="flex items-center border">
<input
v-model.lazy="introSlide.title"
class="
rounded
mb-0
py-2
px-2
focus:outline-none
text-sm
w-full
text-grey-darker
"
placeholder="Enter Title"
/>
</div>
</div>
<div class="mt-4">
<p class="text-sm">Subtitle</p>
<div class="flex items-center border">
<textarea
v-model.lazy="introSlide.subTitle"
class="
rounded
mb-0
py-2
px-2
focus:outline-none
text-sm
w-full
text-grey-darker
min-h-max
h-32
"
placeholder="Presenter Information"
/>
</div>
</div>
<hr />
<div class="flex justify-between items-center mt-6">
<h3 class="text-red-700 font-bold text-sm">Images</h3>
</div>
<div class="mt-4">
<p class="text-sm">Company Logo</p>
<div class="flex items-center border">
<label
class="
flex flex-col
items-center
rounded-lg
tracking-wide
cursor-pointer
border-dashed border-2
w-40
"
:class="introSlide.logo ? '' : 'px-14 py-6'"
>
<input
id="logo_upload"
ref="imgInput"
class="hidden"
type="file"
accept="image/*"
name="logo_upload"
#input="pickFile($event.target.files)"
/>
<img
v-show="introSlide.logo"
:src="`${introSlide.logo}`"
class="rounded-lg w-40 h-24 object-cover"
/>
</label>
<button #click="presentations">testest</button>
</div>
</div>
</div>
</template>
<script>
import introSlideDefault from '#/data/slideContent/introSlide.js'
import { mapMutations } from 'vuex'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { ref, watch, computed } from 'vue'
export default {
setup() {
const store = useStore()
const route = useRoute()
let draftPayload = {
presentationId: route.params.presentationId,
prePopulatedSlide: route.params.slideId,
}
const slideContent = computed(() =>
store.getters['rfps/getslideContentBySlideId'](draftPayload),
)
let introSlide = ref(JSON.parse(JSON.stringify(introSlideDefault)))
const introSlide = computed(() => {
if (slideContent.value == null) {
let introSlideTest = ref({
title: '',
subTitle: '',
logo: '',
})
return introSlideTest
} else {
let draftContent = ref(JSON.parse(slideContent.value.draftSlideContent))
let introSlideTest = {
title: draftContent.value.title,
subTitle: draftContent.value.subTitle,
logo: draftContent.value.logo,
}
return introSlideTest
}
)
watch(
() => introSlide,
(introSlide) => {
store.commit('rfps/setIntroSlide', introSlide.value)
let updateDraftPayload = {
content: JSON.stringify(introSlide.value),
presentationId: route.params.presentationId,
slideId: slideContent.value.slideId,
version: slideContent.value.version,
}
store.dispatch('rfps/updateDraft', updateDraftPayload)
},
{ deep: true },
{ immediate: false },
)
return {
introSlide,
slideContent,
}
},
</script>
If I watch any ref value, For example:
let introSlide = ref({
title: '',
subTitle: '',
logo: '',
})
I can watch for changes with v-model, but if I use a computed value I can't watch it.
I need to get data with getter and to watch it's changes with v-model

Answer 1

you need to be more specify to get the value
const slideContent = computed(() =>
store.getters['rfps/getslideContentBySlideId'](draftPayload).specifyAttribute,
)