Edit in JSFiddle

  const vm = new Vue({
    el: "#app",
    data: {f: false, v: 3},
    methods: {
      c: function() {
        this.v = ""
        this.f = true
        this.$nextTick(function () { this.$refs.r1.focus() })
      },
    },
  })
<div id="app">
  <template v-if="f">
<input v-model.number="v" @keyup="f = false" ref="r1" />
</template>
<template v-else="">
<span @click="c">{{&#39;★&#39;.repeat(v)}}{{&#39;☆&#39;.repeat(5 - v)}}</span></template>
</div>