JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>

<div id="app">
  <font-size v-for="n in fontsize" :target="n"></font-size>
</div>

<div id="aaa" class="xxx">hello, world!!</div>
<div id="bbb" class="xxx">fuck the world</div>
<div id="ccc" class="xxx">fuck everything</div>

CSS

.xxx {
  color: red;
  font-family: monospace;
}

JavaScript

Vue.component('font-size', {
  props: [ 'target' ],
  template: '<div><input type="range" @input="onInput"></div>',
  methods: {
    onInput(e) {
      fontSize(this.target, e.target.value);
    },
  },
  mounted() {
    this.$el.querySelector('input').dispatchEvent(new Event('input'));
  },
});

new Vue({ 
  el: '#app',
  data: () => ({
    fontsize: Array.from(document.querySelectorAll('.xxx'), n => n.id),
  }),
});

function fontSize(id, size) {
  document.querySelector(`#${id}`).style.fontSize = `${size}px`;
}