JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/vue-scrollto.js"></script>
<div id="app">
  
  <div class="box">
    <button v-for="(i,toto) in data1" v-scroll-to="{ element: '#element' + i }">
      Scroll to #element{{i}} (with element)
    </button>
  </div>
  
  <div class="axax">
    <h1 v-for="(index,todo) in data1" :id="'element' + index" style="margin-top:100px;">Hi. I'm element{{index}}</h1>
  </div>
</div>

CSS

#app{
  overflow:hide;
  height:500px;
}
.box{
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 200px;
  border:1px solid red;
}
.axax{
  overflow:hide;
  position: absolute;
  top: 0;
  right: 0;
  height:500px;
  border:1px solid green;
}

JavaScript

new Vue({
  el: '#app',
  data(){
  	return {
    	data1:{
      	a:1,
        b:2,
      }
    }
  },
  mounted(){
  },
  methods: {
  }
})