vue Отфильтровать список по клику

Есть небольшой vue проект: codesandbox

С полем input, виртуальной клавиатурой и некоторым списком с id.

При клике на соответствующие цифры (виртуальной клавиатуры), в поле input должны отображаться соответствующие цифры, а в списке отображаться item с соответствующим набором (кодом id).

Код:

    <ul class="show">
      <li v-bind:key="i" v-for="i in 4" :class="{on: pinLength>=i}"></li>
    </ul>
    <ul class="key">
      <li>
        <span v-on:click="typePin(1)">1</span>
      </li>
      <li>
        <span v-on:click="typePin(2)">2</span>
      </li>
      <li>
        <span v-on:keyup.51="typeNum(3)">3</span>
      </li> ...
    </ul>
    <ul class="items">
      <li v-for="(item, index) in filterItems" v-bind:key="index">
        {{item.name}}
        <br>
        {{item.id}}
      </li>
    </ul>
  </div>
</template>

Скрипт:

<script>
export default {
  name: "HelloKey",
  data() {
    return {
      input: "",
      pin: "",
      items: [
        {
          name: "Item 1",
          id: 12345
        }, ...
      ]
    };
  },
  methods: {
    typePin(num) {
      if (this.pin.length < 4) {
        this.pin = this.pin.concat(num);
        this.input = this.pin;
      }
    },
    clearPin() {
      this.pin = "";
    },
    clearCode() {
      this.code = "";
    }
  },
  mounted() {
    this.pin = "";
  },
  computed: {
    pinLength() {
      return this.pin.length;
    },
    filterItems() {
      return this.items.filter(item => {
        console.log(this.input);
        return item.id;
        //return item.id.includes(this.input);
        //return item.id.match(this.input);
      });
    }
  },
};
</script>

Пробую: return item.id.includes(this.input); или return item.id.match(this.input);, но ошибка:

item.id.includes is not a function"

Вопрос: как отфильтровать список по id по клику на "виртуальную" клавиатуру и ввод в поле формы?