Change component prop Vue

Question

I'm storing a data in pinia store:

text: "Complete",

I'm passing this text as a prop to a component:

<SmallButton
  :title="store.text"
  @click="markComplete()"
/>

Inside the component, the setup function looks like this:

setup(props) {
  let newTitle = ref(props.title);
  ...
}

And the newTitle text is shown in a div:

<div :class="text-caption q-mx-xs ">{{ newTitle }}</div>

Right now if the store.text is changed, the newTitle text stays the same. I also tried to use store.text inside the div, but nothing happened.

How can I solve this?

Answer 1

Solution for Vue3

https://stackblitz.com/edit/vue-t4xx8b?file=src/components/SmallButton.vue

<template>
  <button :title="title" @click="$emit('click')">{{ title }}</button> <br />
</template>

<script>
export default {
  name: 'SmallButton',
  props: ['title'],
};
</script>