vueで書かれたタグ検索機能をhtmlやcss、JSで表現したいです

一度vueに詳しい友人にタグ検索機能をvueで書いてもらったのですが、諸事情によりまったく同じような機能をhtmlやcss、JSなどの言語で書き換えたいと思っています。
そちらの言語の知識が乏しく苦労しているので、恐縮ですが書き換えの方法を教えていただけると嬉しいです。vueのコードを貼ります。

該当のソースコード

Vue.js
1<template>
2  <div>
3    <div class="hero">
4      <div class="hero-body">
5        <div class="container">
6          <h1>タグ検索デモ</h1>
7          <div id="tag">
8            <span v-for="(tag,index) in tags">
9              <span class="button tag is-info" @click="clickedTag(index)">{{ tag.name }}</span>
10            </span>
11          </div>
12          <div class="button is-link" @click="search">検索</div>
13          <div class="button is-danger" @click="clear">クリア</div>
14        </div>
15      </div>
16    </div>
17    <div class="hero">
18      <div class="hero-body">
19        <div class="container">
20          <div class="result-image">
21            <figure class="image is-128x128" v-for="image in result_images">
22              <img :src="image"
23              alt="">
24            </figure>
25          </div>
26        </div>
27      </div>
28    </div>
29  </div>
30</template>
31
32<script>
33export default {
34  name: "hello",
35  data() {
36    return {
37      tags: [
38        { name: "人", selected: false },
39        { name: "サッカー", selected: false },
40        { name: "学校", selected: false },
41        { name: "パソコン", selected: false }
42      ],
43      // 写真のリンク
44      result_images: []
45    };
46  },
47  methods: {
48    clickedTag(index) {
49      this.tags[index].selected = !this.tags[index].selected;
50      if (this.tags[index].selected) {
51        document
52          .getElementById("tag")
53          .children[index].children[0].setAttribute(
54            "style",
55            "background-color: #23d160"
56          );
57      } else {
58        document
59          .getElementById("tag")
60          .children[index].children[0].setAttribute(
61            "style",
62            "background-color: #1496ed"
63          );
64      }
65    },
66    search() {
67      var tags_search = new Array();
68      this.tags.forEach(function(item) {
69        if (item.selected) {
70          tags_search.push(item.name);
71        }
72        console.log(tags_search.length);
73      });
74
75      for (var i = 0; i < tags_search.length; i++) {
76        this.result_images.push("./スクリーンショット 2018-05-23 9.52.08.png");
77      }
78    },
79    clear() {
80      this.tags.forEach(function(item, index) {
81        item.selected = false;
82        document
83          .getElementById("tag")
84          .children[index].children[0].setAttribute(
85            "style",
86            "background-color: #1496ed"
87          );
88      });
89    }
90  }
91};
92</script>
93
94<style>
95.tag {
96  margin-left: 1rem;
97}
98#tag {
99  margin-bottom: 1rem;
100}
101.result-image {
102  display: grid;
103  /* grid-template-rows: 200px; */
104  grid-template-columns:
105    calc((100%-2rem) / 5) calc((100%-2rem) / 5) calc((100%-2rem) / 5)
106    calc((100%-2rem) / 5) calc((100%-2rem) / 5);
107  margin: 0 -0.5rem;
108}
109</style>
110

試したこと

現在書いているhtmlのコードも一応貼っておきます。ボタンが押された際にボタンの色を変更するだけのものになっていますが….
初歩的な質問ですみませんがよろしくお願いいたします。

html
1<html>
2  <head>
3    <meta charset="utf-8">
4    <title>タグ検索デモ</title>
5    <link rel="stylesheet" href="stylesheet.css">
6    <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
7  </head>
8　<body>
9
10    <!tags button>
11    <div>
12      <button>ボタン</button>
13      <button>ボタン</button>
14      <button>ボタン</button>
15      <button>ボタン</button>
16      <button>ボタン</button>
17      <button>ボタン</button>
18      <button>ボタン</button>
19      <button>ボタン</button>
20      <button>ボタン</button>
21      <button>ボタン</button>
22    </div>
23
24    <!search button>
25    <div class="検索ボタン">
26      <tr><td align="center">
27        <input type="button" value="検索">
28      </td></tr>
29    </div>
30    <div class="クリアボタン">
31      <input type="button" value="クリア">
32    </div>
33    
34<style>
35button {
36  width: 100px;
37  height: 40px;
38  border: 1px solid #ccc;
39  background-color: white;
40  color: #000000;
41}
42
43.active {
44  background-color: red;
45  color: white;
46}   
47</style>
48
49<script>
50$(function(){
51  var btn = $('button');
52  btn.click(function(){
53    btn.removeClass('active');
54    $(this).addClass('active');
55  });
56});
57</script>
58    
59    
60  </body>
61
62</html>