Vue: кнопки не определены

Question

Так что я пытаюсь сделать калькулятор, используя Vue, и моя идея состоит в том, чтобы сделать 2 компонента, экран и кнопки (которые содержат кнопку компонента), однако всякий раз, когда я пытаюсь добавить их в components, я получаю сообщение Uncaught ReferenceError: Buttons is not defined.

Либо я определил Buttons неправильно, либо components может иметь только 1 значение.

Также, если я удаляю screen или Buttons из components, я получаю Unknown custom element.

JSFIDDLE: https://jsfiddle.net/qg2mksr1/14/

new Vue({
  el: "#app",
  data: {
    userInput: "0"
  },
  components: {
    screen,
    buttons : Buttons
  }
});

Vue.component('screen', {
  template: `<div id="screen">
              <input type="text" readOnly value={{this.$parent.userInput}}>
             </div>`
});

Vue.component('Buttons', {
  template: `<div id="buttons">
              <div className="button-row">
                <Button value='C'></Button>
                <Button value='+/-'></Button>
                <Button value='%'></Button>
                <Button value='/' id="div"></Button>
              </div>

              <div className="button-row"> 
                <Button value='7'></Button>
                <Button value='8'></Button>
                <Button value='9'></Button>
                <Button value='*' id="mul"></Button>
              </div>

              <div className="button-row"> 
                <Button value='4'></Button>
                <Button value='5'></Button>
                <Button value='6'></Button>
                <Button value='-' id="sub"></Button>
              </div>

              <div className="button-row"> 
                <Button value='1'></Button>
                <Button value='2'></Button>
                <Button value='3'></Button>
                <Button value='+' id="add"></Button>
              </div>

              <div className="button-row">
              <Button value='=' id="eq" ></Button>      
              </div>
            </div>`
});

Vue.component('Button', {
  props: ['value'],
  template: `<button type="button" @:click="add({{ value }})">
        {{ value }}
      </button>`,
  methods: {
    add(input) {
      if (input == "=") {
        this.$root.userInput = eval(this.$root.userInput).toString();
      } else if (input == "C") {
        this.$root.userInput = "0";
      } else if (input == "+/-" && this.$root.userInput != "0") {
        this.$root.userInput = eval(`-(${this.$root.userInput})`).toString();
      } else if (
        (input.match("[0-9]") || this.$root.userInput.slice(-1) != input) &&
        this.$root.userInput != "0"
      ) {
        this.$root.userInput = this.$root.userInput + input;
      } else if (this.$root.userInput == "0") {
        this.$root.userInput = input;
      }
    }
  }
});