ChannelDetail.vue

<template>
  <div class="channels">
    <h2>{{$route.params.id}}</h2>

    <!-- IF this line is enabled that WATCH is not working at all <component :is="selectedChannelDetail" :channel="channel"></component> -->
    <!-- if <facebook-page-detail is enabled WATCH is working at least for this component -->
    <facebook-page-detail :channel="channel"></facebook-page-detail> 
  </div>
</template>

<script>
  import channelService from 'services/amio-api/channel.service'
  import FacebookPageDetail from 'components/channel/facebook/FacebookPageDetail.vue'
  
  function getChannel (to, next) {
    channelService.get(to.params.id)
      .then(response => {
        next(vm => vm.initComponent(response.data))
      })
  }

  export default {
    name: 'channel-detail',
    data () {
      return {
        channel: null,
        selectedChannelDetail: null
      }
    },

    methods: {
      initComponent(channel) {
        this.channel = channel

        // select a specific platform details
        if (this.channel.type === 'facebook_messenger') {
          this.selectedChannelDetail = 'facebook-page-detail'
        }
      }
    },

    components: {
      'facebook-page-detail': FacebookPageDetail
    },

    created() {
      eventBus.$on('update-channel', this.updateChannel)
    },

    beforeRouteEnter (to, from, next) {
      getChannel(to, next)
    },

    beforeRouteUpdate (to, from, next) {
      getChannel(to, next)
    }
  }
</script>

FacebookChannelDetail.vue

<template>
  <div v-if="channel">
      <facebook-page :channel="channel"
                       :fb-login-status="fbLoginStatus">
       </facebook-page>
  </div>
</template>

<script>
  import FacebookPage from 'components/channel/facebook/facebook-page/FacebookPage.vue'

  export default {
    props: ['channel'],

    components: {
      'facebook-page': FacebookPage
    },

    data() {
      return {}
    },

    watch: {
      channel: function (newValue, oldValue) {
        console.warn('FacebookChannelDetail - Prop changed: ', newValue, ' | was: ', oldValue)
      }
    }
  }
</script>

FacebookPage.vue

<template>
  <div>
    <h3>Facebook Page</h3>
    <test-connection :channel="channel" :text="text"></test-connection>
  </div>
</template>

<script>
  import TestConnectionWidget from './components/TestConnectionWidget.vue'

  export default {
    props: ['channel'],

    watch: {
      channel: function (newValue, oldValue) {
        console.warn('FacebookPage - Prop changed: ', newValue, ' | was: ', oldValue)
      }
    },

    components: {
      'test-connection': TestConnectionWidget
    }
  }
</script>

TestConnectionWidget.vue

<template>
  <div>
    <h4>Test Connection</h4>
  </div>
</template>

<script>
  export default {
    props: ['channel'],

    watch: {
      channel: function (newValue, oldValue) {
        console.log('Prop changed: ', newValue, ' | was: ', oldValue)
      }
    }

  }
</script>