[Chartjs]-Vue + chartjs : Nearest point on hover tooltip not working

After paraphrasing my question to the extreme, I just found a codepen whose code doesn’t match the documentation BUT it answers my question perfectly.

So to get the result, you have to use options.tooltips.mode and not options.interaction.mode !

Then, you have to change :

    interaction: {
     axis: 'xy', 
     mode: 'nearest',
     intersect: false

    }

By :

tooltips: {
  mode: 'index',
  intersect: false,
},

Here is the final code :

Vue.component('line-chart', {
      extends: VueChartJs.Line,
      mounted () {
        this.renderChart({
          labels: ['Dec 2017', 'Jan 2018', 'Feb 2018', 'Mar 2018', 'Apr 2018', 'May 2018', 'Jun 2018', 'Jul 2018', 'Aug 2018', 'Sep 2018', 'Oct 2018', 'Nov 2018'],
          datasets: [
            {
              label: '2018 pages read per month',
              backgroundColor: '#f87979',
              data: [1238, 1660, 1571, 976, 2344, 1227, 949, 1109, 900, 458, 240, 384]
            }
          ]
        }, {responsive: true, maintainAspectRatio: false, 
              tooltips: {
             axis: 'xy', 
             mode: 'nearest',
             intersect: false
    
            }
           })
      }
    });
    
    var vm = new Vue({
      el: '#app',
      data: { }
    });

Here is the codepen working as excepted with tooltips in nearest mode on hovering the chart’s line.

Final Result :