如何让<v-otp-input>字段隐藏在vuejs中？

<template>
  <div>
    <v-otp-input v-if="!isHidden"></v-otp-input>
    <button @click="hideField">隐藏</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHidden: false
    };
  },
  methods: {
    hideField() {
      this.isHidden = true;
    }
  }
};
</script>

<template>
  <div>
    <v-otp-input :class="{ 'hidden-field': isHidden }"></v-otp-input>
    <button @click="hideField">隐藏</button>
  </div>
</template>

<style>
.hidden-field {
  display: none;
}
</style>

<script>
export default {
  data() {
    return {
      isHidden: false
    };
  },
  methods: {
    hideField() {
      this.isHidden = true;
    }
  }
};
</script>