реализация функционала ctrl z ctrl y в web приложении JavaScript

подскажите как можно реализовать функционал ctrl z ctrl y, только мне его нужно навесить на button чтобы откат ведённых данных происходил при клике.

Подскажите где можно узнать об этом подробнее ? или каким алгоритмом это реализовать ?

Вот мои наработки:

<template>
  <div id="app">
    <form class="form" @submit.prevent="onSubmit">
      <input type="text" v-model="volume">
      <button>clik</button>
    </form>
    <button @click="down">down</button>
    <hr>
    <pre>{{ store }}</pre>
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      index: 0,
      history: [],
      volume: 'text'
    }
  },
  methods: {
    onSubmit () {
      this.history.push(this.volume)
    },
    down () {
      this.volume = this.history[this.history.length - this.index]
      if (this.index < this.history.length) this.index = this.index + 1
    }
  },
  computed: {
    store () {
      return this.history
    }
  },
  created () {
    this.history.push(this.volume)
    this.index = this.history.length
  }
}
</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>