如何使用vue实现一次点击使输入框变大

<template>
  <div>
    <input type="text" :style="inputStyle" ref="inputBox">
    <button @click="changeSize">点击变大</button>
  </div>
</template>

data() {
  return {
    inputStyle: {
      width: '100px',
      height: '30px'
    }
  }
}

methods: {
  changeSize() {
    this.inputStyle.width = '200px';
    this.inputStyle.height = '50px';
  }
}

import Vue from 'vue';

new Vue({
  el: '#app',
  data() {
    return {
      inputStyle: {
        width: '100px',
        height: '30px'
      }
    }
  },
  methods: {
    changeSize() {
      this.inputStyle.width = '200px';
      this.inputStyle.height = '50px';
    }
  }
});