[Vuejs]-Why vue v-for list update even though data related not changed

Vue.js allows you to define filters that can be used to apply common text formatting.

In your example you defined a global filter called log, according with docs:

The filter’s function always receives the expression’s value (the result of the former chain) as its first argument.

It seems that anytime any local data change the filter log gets called, and since it’s value has not changed always print the same array data, however that’s not mean that the DOM gets updated.

Let’s make a little experiment to prove the li elements are not being updated with your code example:

var app = new Vue({
  el: '#app',
  data: {
    num: 0,
    items: ['a', 'b']
  },
  filters: {
    log: function (v) {
      return '#' + v;
    }
  },
  methods: {
    handleButtonClick() {
      this.num ++;
    }
  }
});

// ignore this is only to hide devtools info
Vue.config.devtools = false;
Vue.config.productionTip = false;

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<ul id='app'>
  <li v-for="item of items">{{ items | log }}</li>
  <p>Value of num is {{ num }}</p>
  <button @click="handleButtonClick">
    Update num ++
  </button>
</ul>

Now open chrome dev tools and on Elements tabs inspect the li elements:

You should see that only num is being updated. Take a look to this screenshot as reference: