how can we access the state variable for setter and getter using computed

[anilkumarthakur60]

we have a child component that receives a prop store. The store prop contains various state variables. One of these state variables is formRef, which you need to access and modify using a computed property. The computed property should act as both a getter and a setter for the formRef state variable. How can you implement the computed property to access and modify the formRef state variable by passing the store ?

my store

export const useCategory = defineStore("category", () => {
  const  formRef = ref({})
  
  return {
formRef

  }
})

parent component

<template>

 <Create :store="store">
      <template #body>
        <CategoryCreate/>
      </template>
    </Create>

</template>


<script setup>
import Create from "components/Common/Create.vue";
const store = useCategory();
</script>

i am receiving the error as ESLint: Unexpected mutation of "store" prop.(vue/no-mutating-props) in child component

in create component

<script setup>
const formRef = computed({
  get: () => props.store.$state.formRef,
  set: (val) => props.store.$state.formRef = val
})
</script>
import List from "components/crud/CommonList.vue";

[posva]

you don't need the computed setter, it's really just a wrapper that adds nothing in that case. You have two options:

• Disable the eslint rule for that line
• Directly call useCategory() within Create component

[anilkumarthakur60]

i cannot call directly because its common component