In some cases, it is necessary to force Vue in order to re-render your component since it won't track some changes.

There are some ways of doing so, such as using the v-if hack, but the correct way is by using forceUpdate method:

  export default {
    methods: {
      forceUpdateMyComponent() {
        this.$forceUpdate()
      },
    },
  }

Keep that in mind that $ is necessary to use this method in your Vue instance.
And you better be notified that this won't update any computed property but only force the view of your component to be re-rendered.

Sometimes you might need to watch some nested data you can do this using dot notation:

  export default {
    data() {
      return {
        myInfo: {
          firstName: 'Adnan'
        }
      }
    },
    watch: {
      'myInfo.firstName'() {
        console.log('Here');
      }
    }
  }

The code above is when you know which property inside your object to watch!
But what if you want to watch your whole object and also its values?

  export default {
    data() {
      return {
        myFruits: {apple: 'red', banana: 'yellow'},
      }
    },
    methods: {
      changeIt() {
        this.myFruits.apple = 'green'
      },
    },
    watch: {
      myFruits: {
        deep: true,
        handler() {
          console.log('Fruits updated!')
        },
      },
    },
  }

You can define your watch not as a function immediately but as an object, then by using the deep key and the value true watch your object and put what you want to be fired when the data got changed inside a function called handler .

As you know v-model is used to make a two-way binding with an input element/component and a data property.

If you are making a custom component and want it to support v-model you can emit the input keyword and in order to receive what is passed to your component initially with the v-model you simply need to get a prop called value .

For an easier comprehension check the code below:

<template>
    <div>
        <label>My custom test input: <input :value="inputValue" @input="emitTheData" /></label>
    </div>
</template>

<script>
  export default {
    props: ['value'],
    data() {
      return {
        inputValue: value
      }
    },
    methods: {
      emitTheData() {
        this.$emit('input', this.inputValue)
      }
    }
  }
</script>

This simple component will bind the data passed to it in two directions.

Note: As you can see, I assigned the prop called value to a data called inputValue and used it in my input, you might think that I could pass the prop directly to my input but as Vue suggests it is better not to alter props directly.

Imagine having a component with no watch or computed property and no methods! You would only use it to render some other components as one with some props. If it is so then why waste Vue's time when there are no lifecycle methods?

A functional component can be defined as below:

<template functional>
  <div>{{ props.foo }}</div>
</template>

Note: Keep in mind that there is no this context in these components since it is a functional component!