I have a plugin that adds some property to Vue instance.
Then I can access this property inside ponents using this.$plugin.prop. How can I watch for its changes? I need to do something inside ponent based on this.$plugin.prop value but neither watch or this.$watch worked for me. I assume its because watch works in ponent context so I can't watch for variable outside ponent, for example

    mounted() {
        this.$watch('$plugin.prop', val => console.log(val));
    }

doesn't work.
What is the right way to acplish this?

I have a plugin that adds some property to Vue instance.
Then I can access this property inside ponents using this.$plugin.prop. How can I watch for its changes? I need to do something inside ponent based on this.$plugin.prop value but neither watch or this.$watch worked for me. I assume its because watch works in ponent context so I can't watch for variable outside ponent, for example

    mounted() {
        this.$watch('$plugin.prop', val => console.log(val));
    }

doesn't work.
What is the right way to acplish this?

• javascript
• vue.js

Share Improve this question Follow asked Jul 27, 2017 at 11:01 user0103user0103 1,27233 gold badges1818 silver badges3636 bronze badges 1

• 3 You can try to store plugin prop reference in data model of ponent, and then watch that property from the ponent data model - jsbin./kopucayoro/edit?html,js,output – Belmin Bedak Commented Jul 27, 2017 at 11:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Instead of mounted() try

watch: {
   '$plugin.prop': function(value){
      console.log(value);
    }
}

The offical documentation on watchers in the Vue docs

You may use puted properties instead like so:

puted: {
    pluginChanged() {
        console.log(this.$plugin.prop.val);
        return this.$plugin.prop.val;
    }

Read more about puted properties here.