Búsqueda de sitios web

javascript - Vue: Actualizar una propiedad sincronizada dentro de un método


Estoy tratando de usar el patrón de propiedad sincronizada para poder compartir una propiedad única entre el padre y el hijo (así que usar un patrón como vuex me parece innecesario, como lanzar una bomba a una mosca). He logrado conectar propiedades sincrónicas de la siguiente manera:

Niño :

<template>
    <v-btn @click="syncedProp = false"> Done </v-btn>
</template>

export default {
  props: {
    myProp: {
      type: Boolean,
    },
  },
  computed: {
    syncedProp: {
      get() {
        return this.myProp
      },
      set(value) {
        this.$emit('update:myProp', value)
      },
    },
  },
}

Padre:

<template>
    <Child :myProp.sync="parentProp"/>
</template>

export default { 
  data: function(){
    return {
       parentProp = ''
    }
  }
}

Esta estrategia ha funcionado para mí, hace lo que se espera de emitir el evento de modificar la propiedad desde el hijo para que el padre la actualice y el cambio se refleje en el hijo. Pero mi problema es que ahora la intención del hijo de modificar la propiedad quiero hacerla desde un método y no directamente. Esto significa (mira la línea @click):

Niño con método:

<template>
  <v-btn @click="changeProperty(false)"> Done </v-btn>
</template>

export default {
  props: {
    myProp: {
      type: Boolean,
    },
  },
  computed: {
    syncedProp: {
      get() {
        return this.myProp
      },
      set(value) {
        this.$emit('update:myProp', value)
      },
    },
  },
  methods: {
    changeProperty(value) {
      this.syncedProp = value
    }
  }
}

Como puedes ver en el botón, llamo al método que actualiza la propiedad, el cual debería llamar al $emit. Pero con el método no lo hace, y sin el método directo sí. ¿Por qué es esto? ¿Cómo podría hacerlo con el método? Gracias.