Vue horizontal scroller -- https://codepen.io/kuntau/full/XWmJezP

index.html

<div id="card" class="card-header bg-gray-200 border rounded shadow-md relative flex">
  <button id="left" @click="left" class="p-4 hover:bg-gray-300 border"><i class="fas fa-chevron-left"></i></button>
  <div id="wrapper" ref="wrapper" class="wrapper whitespace-no-wrap flex-auto flex overflow-x-hidden w-full">
    <a class="inner px-4 py-4 border-r text-gray-700 bg-gray-300 shadow-inner" href="#"><i class="fas fa-star"></i> Favorite</a>
    <a class="inner px-4 py-4 hover:bg-gray-300 border-r" href="#"><i class="fas fa-utensils"></i> Foods</a>
    <a class="inner px-4 py-4 hover:bg-gray-300 border-r" href="#"><i class="fas fa-beer"></i> Cold drinks</a>
    <a class="inner px-4 py-4 hover:bg-gray-300 border-r" href="#"><i class="fas fa-coffee"></i> Hot drinks</a>
    <a class="inner px-4 py-4 hover:bg-gray-300 border-r" href="#"><i class="fas fa-search"></i> Search</a>
    <a class="inner px-4 py-4 hover:bg-gray-300 border-r" href="#"><i class="fas fa-utensils"></i> F{{ position }}</a>
    <a class="inner px-4 py-4 hover:bg-gray-300 border-r" href="#"><i class="fas fa-beer"></i> Cold drinks</a>
    <a class="inner px-4 py-4 hover:bg-gray-300 border-r" href="#"><i class="fas fa-coffee"></i> Hot drinks</a>
    <a class="inner px-4 py-4 hover:bg-gray-300 border-r" href="#"><i class="fas fa-search"></i> Search</a>
    <a class="inner px-4 py-4 hover:bg-gray-300 border-r" href="#"><i class="fas fa-utensils"></i> Foods</a>
    <a class="inner px-4 py-4 hover:bg-gray-300 border-r" href="#"><i class="fas fa-beer"></i> Cold drinks</a>
    <a class="inner px-4 py-4 hover:bg-gray-300 border-r" href="#"><i class="fas fa-coffee"></i> Hot drinks</a>
    <a class="inner px-4 py-4 hover:bg-gray-300 border-r" href="#"><i class="fas fa-search"></i> Search</a>
  </div>
  <button id="right" @click="right" class="p-4 hover:bg-gray-300 border"><i class="fas fa-chevron-right"></i></button>
</div>

script.js

// inspired by https://forum.vuejs.org/t/horizontal-scroll-using-buttons-in-vuejs/38089
new Vue({
  el: '#card',
  data: {
    step: 200, // scroll step in pixels
    dura: 400, // animation duration in miliseconds
    position: 0 // element scrollLeft starting position
  },
  methods: {
    left: function() {
      const wrapper = this.$refs.wrapper;
      this.scrollTo(wrapper, -this.step, this.dura);
    },
    right: function() {
      const wrapper = this.$refs.wrapper;
      this.scrollTo(wrapper, this.step, this.dura);
    },
    scrollTo: function(elm, step, duration) {
      const scrollPos = elm.scrollLeft;
      this.position = elm.scrollLeft;
      // Condition to check if scrolling is required
      if ( !( (scrollPos === 0 || step > 0)
             && (elm.clientWidth + scrollPos === elm.scrollWidth
                 || step < 0)))
      {
        let start;
        const scroll = function(timestamp) {
          if (!start) start = timestamp;
          const progress = timestamp - start;
          elm.scrollLeft = scrollPos + step * (progress/duration); //Set the scrolleft
          if (progress < duration) {
            window.requestAnimationFrame(scroll);
          }
          return;
        }
        window.requestAnimationFrame(scroll);
      }
    },
  }
})