[Vuejs]-JS import – VueJs Router – having trouble refactoring a watch object

For your purpose there are ‘Mixins’ in Vue.js: documentation

What you can do:

create a file, say mixins/index.js:

export const routeWatcher = {
   watch: {... your watcher code pasted here ... }
};

import into your component:

import { routeWatcher } from 'path/to/mixins/index';

add mixin to your component properties and methods:

<script>
   export default {
       mixins: [routeWatcher];
       data () ...... all your original component's script content
   }

Mixin’s content will be merged with component’s original properties and act if it was hardcoded there.

Addition after your comment:

You can also declare Mixin globally, like this:

above ‘new Vue’ declaration put this code:

Vue.mixin({
   watch: {....}
});

This mixin will appear in every component.