moskwin68

"Ivanov I.Petrov P. Sidorov S.".replace(/\./, '\.<br>')

"Ivanov I.<br>Petrov P. Sidorov S."

Вариант раз, размер шрифта делаем свойством компонента, ну и v-model + watch:

data: () => ({
  size: ...
}),
watch: {
  size: {
    immediate: true,
    handler(val) {
      fontSize(this.target, val);
    },
  },
},

<input type="range" v-model="size">

Вариант два - слушаем событие input:

methods: {
  onInput(e) {
    fontSize(this.target, e.target.value);
  },
},
mounted() {
  this.$el.querySelector('input').dispatchEvent(new Event('input'));
},

<input type="range" @input="onInput">

Вы не вызываете upgrade, вы просто меняете значение. Переустановка градиента не происходит.