How to reset the filter?

Question

Vue.js

There is a computed property and an input associated with it. When you enter a query, the array is filtered, and when you close it by pressing the button, the input is cleared, the calculated property is an empty string. But for some reason, a filtered array of elements remains on the page, and when the input is cleared by Backspace, the array returns to its original state. How to reset the filter by pressing a button?
Home.vue
demo

<template>
  <div>
    <div class="header">
      <div class="container container-header">
        <router-link class="site-name" tag="a" to="/">{{sitename}}</router-link>

        <div class="search">
          <div class="search-input closed">
            <div class="container container-input">
              <input
                id="i"
                v-model="search"
                type="text"
                placeholder="Поиск..."
                autofocus
                class="search-game"
              >
            </div>
          </div>

          <button id="s" class="toggle-search"></button>
        </div>
      </div>
    </div>

    <section>
      <div class="container container--tabs">
        <ul class="tabs">
          <li class="active tabs-item">
            <a href="#">ВСЕ</a>
          </li>
          <li class="tabs-item">
            <a href="#">HTC</a>
          </li>
          <li class="tabs-item">
            <a href="#">PSVR</a>
          </li>
          <li class="tabs-item">
            <a href="#">PS4</a>
          </li>
        </ul>
      </div>
    </section>
    <div class="wrapper container">
      <div class="item" v-for="game in searchResult" :key="game.id">
        <router-link tag="div" :to="{ name : 'Id', params: {id: game.id}}" class="card">
          <div class="card-desc">
            <h3 v-text="game.title"></h3>
            <p v-text="game.description"></p>
          </div>
          <img v-bind:src="game.image" class="card-image">
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>


export default {
  name: "home",
  data() {
    return {
      sitename: "Driv3r - Центр виртуальной реальности",
      publicPath: process.env.BASE_URL,
      search: "",
      games: []
    };
  },
  mounted() {
    this.$store.dispatch("loadGames");
    var i = document.querySelector(".search-input");
    var inp = document.querySelector(".search-game");
    var inputs = document.getElementsByTagName("input");
    var s = document.querySelector(".toggle-search");
    s.addEventListener("click", function() {
      if (i.classList.contains("closed")) {
        i.classList.remove("closed");
        i.classList.add("opened");
        inp.focus();
      } else {
        i.classList.add("closed");
        i.classList.remove("opened");
        inp.value = "";
        this.search = "";
        console.log(this.search);
      }
    });

    function all(css, element) {
      element = element || document;
      return [].slice.call(element.querySelectorAll(css));
    }

    let listItems = all("ul li");

    listItems.forEach(li => {
      all("a", li).forEach(a => {
        a.addEventListener("click", () => {
          listItems.forEach(li => li.classList.remove("active"));
          li.classList.add("active");
        });
      });
    });
  },
  computed: {
    // ...mapState(["games"]),
    searchResult() {
      // console.log(this.games);
      return this.$store.getters.searchGames(this.search);
    }
  }
};
</script>

store.js

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";
import VueAxios from "vue-axios";

Vue.use(Vuex);

export default new Vuex.Store({
  namespaced: true,
  state: {
    games: []
  },
  getters: {
    searchGames: state => query => {
      return state.games.filter(game => {
        return game.title
          .toString()
          .toLowerCase()
          .includes(query.toString().toLowerCase());
      });
    }
  },
  actions: {
    loadGames({ commit }) {
      axios
        .get("games.json")
        .then(r => r.data.games)
        .then(games => {
          commit("SET_GAMES", games);
        });
    }
  },
  mutations: {
    SET_GAMES(state, games) {
      state.games = games;
    },
    inputQuery(state, search) {
      state.search = search;
    }
  }
});

Answer 1

You lose the context in the click handler (Home.vue), so you have search there - not a property of the component at all. Make it an arrow function (this is to make it work right now, but really - all this slag in mounted needs to be rewritten, open the vue documentation, and figure out how to assign event handlers, add / remove classes, etc.).