我正在VUE 3中开发一些喜欢或添加到最喜欢的功能。但我在这里面临的问题是，虽然我喜欢或不喜欢的具体事情，它不更新的前端用户界面。在刷新它得到更新。在这里，我使用后端功能喜欢和不喜欢他们的工作很好。帮助我的家伙...
下面是Parent组件的代码

<Suspense>
        <template #default>
          <div class="is-flex is-1 is-flex-wrap-wrap" v-if="reciepes">
            <ReciepeCard
              class="card radius-small mx-2 my-3 p-3"
              v-for="(reciepe, i) in reciepes"
              :reciepe="reciepe"
              :key="i"
              :savedDishesId="savedReciepesIds"
              @openReciepe="openFunc(reciepe)"
              @likeIndi="isLiked(reciepe)"
            >
            </ReciepeCard>
          </div>
        </template>
      </Suspense>

import ReciepeCard from '../components/reciepe-cards/reciepeCard.vue'

const reciepeStore = useReciepeStore(),
  userStore = useUserStore(),
  loginStore = useLoginStore(),
  router = useRouter()
const reciepes = ref([]),
  username = ref('User'),
  savedReciepesIds = ref([])

onMounted(async () => {
  fetchData()
  let userId = VueCookies.get('id')
  if (userId) {
    let user = await userStore.fetchAccDetails(VueCookies.get('id'))
    username.value = user.username
  }
  savedReciepesIds.value = await userStore.fetchSavedDishesId(userId)
  console.log(savedReciepesIds.value)
  // let like=likeNotify();
})

async function isLiked(userId) {
  console.log("parent");
  savedReciepesIds.value = await userStore.fetchSavedDishesId(userId)
}
async function fetchData() {
  reciepes.value = await reciepeStore.getReciepes()
}
console.log(loginStore.isAuth())

function openFunc(reciepe) {
  router.push({ path: `/reciepe/${reciepe._id}` })
}
</script>

儿童组件网

<template>
  <div class="reciepe-card bg-color-white" style="cursor: pointer">
    <div class="card-head" @click="emits('openReciepe')">
      <figure class="">
        <img :src="props.reciepe.img" alt="Recipe Image" class="image radius-default" />
      </figure>
    </div>
    <div class="card-desc" @click="emits('openReciepe')">
      <h3 class="is-size-3 color-tx-sec">{{ props.reciepe.dish_name }}</h3>
      <p class="is-size-5">{{ resizeText(props.reciepe.description) + '...' }}</p>
    </div>
    <div class="is-flex is-justify-content-space-between is-align-items-center is- mt-3">
      <p class="has-text-link" @click="emits('openReciepe')">View more</p>
      <Icon
        icon="ph:heart-bold"
        v-if="!isLiked"
        style="height: 2rem; width: 2rem"
        @click="toogleLike()"
      ></Icon>
      <Icon
        icon="mdi:heart"
        color="red"
        v-else
        style="height: 2rem; width: 2rem"
        @click="toogleLike()"
      ></Icon>
    </div>
  </div>
</template>

<script setup>
import { Icon } from '@iconify/vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useUserStore } from '../../stores/userStore'

import VueCookies from 'vue-cookies'

const isLiked = ref(false)
onMounted(() => {
  updateLikeStats()
})

watch(
  () => props.savedDishesId,
  () => {
    updateLikeStats()
  }
)
// const isLiked = computed(() => {
//   if (props.savedDishesId != null || props.savedDishesId != undefined)
//     return !props.savedDishesId.includes(props.reciepe._id)
//   else return false
// })
const userStore = useUserStore(),
  userId = ref(VueCookies.get('id') || null)
const emits = defineEmits(['openReciepe', 'likeIndi'])
const props = defineProps({
  reciepe: {
    type: Object,
    required: true
  },
  savedDishesId: {
    type: Array,
    required: true,
    default: () => []
  }
})

// Function for resizing the description
function resizeText(text) {
  return text.slice(0, 120)
}

async function toogleLike() {
  await userStore.toogleLikeReciepe(props.reciepe._id, { userId: userId.value })
  emits('likeIndi',userId.value);
  updateLikeStats()
}

function updateLikeStats() {
  isLiked.value = props.savedDishesId.includes(props.reciepe._id)
  console.log(isLiked.value)
}
</script>