Vue watch of sync non-required property

0
votes

We have synced property and watch to this prop at Child component. This property is set with default value (non-requeired)

Is there any way to force watching property change in child component in case if we don't provide prop from parent to child?

Demo: https://codesandbox.io/s/vue-watch-sync-prop-bug-demo-lofei

I've added some code from two components below.

- Parent.vue

<template>
  <!-- watch inside not works if remove ':message.sync' here -->
  <Child :message.sync="message" />
</template>

<script>
import Child from "./Child";
export default {
  name: "Parent",
  components: { Child },
  data: function (params) {
    return {
      message: "",
    };
  },
};
</script>

- Child.vue

<template>
  <div>message: {{ messageValue }}</div>
</template>

<script>
export default {
  name: "Child",
  props: {
    message: {
      type: String,
      default: "",
    },
  },
  computed: {
    messageValue: {
      get() {
        return this.message;
      },
      set(value) {
        this.$emit("update:message", value);
      },
    },
  },
  watch: {
    message(value) {
      // this not executing
    },
  },
};
</script>
1
vue.jsvuejs2

1 Answers

1
votes

Try out to add immediate:true to the watch property :

 watch: {
    message:{
      handler(value) {
     
      },
      immediate:true
    }
  },