Enable the input when click add new and Disable the input after click the create button

I have an <input> and two <button>s. If I click Add new input, the <input> shows. However, I want to make the <input> disabled after the Create button is clicked. The <input> is working already, but it doesn't get disabled after clicking the Create button.

App.vue

<template>
  <div id="app">
    <button class="button is-orange has-text-white" @click="addRow">Add Input</button>
    <table>
      <thead>
        <tr>
          <th></th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="(input, index) in inputs">
          <td width="1%">{{++index}}</td>
          <td width="18%">
            <b-field>
              <input v-model="input.one" id="one" class="input one" type="text" placeholder>
            </b-field>
          </td>
          <td width="15%">
            <button class="button is-orange has-text-white" @click="inserts(inputs)">Create</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      searchorderid: null,
      inputs: [],
      data: {},
      loading: false
    };
  },
  methods: {
    addRow() {
      this.inputs.push({
        one: ""
      });
    },
    deleteRow(index) {
      this.inputs.splice(index, 1);
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

I want the output to look like this:

After Create is clicked, the preceding <input> should be disabled.

demo