[Vue.js]パスワードの表示・非表示を切り替えたい。

プログラミング勉強をし始めて約４ヶ月とまだまだ浅く、日々勉強中の社会人です。

上記、記事を参考にパスワードの表示・非表示を実装したいと考えており、
下記2点について分かる方いらっしゃいましたらお力添えを頂きたいです。

⑴パスワードが･･･マーク(?)にならず、表示状態になったままになってしまいます。
⑵目のマークを表示する際は斜線を入れたいです。

勉強し始めたばかりなので至らぬ点が多いかとお思いますが、どこをどう直したら良いかご教授いただけると幸いです。
宜しくお願い致します。

該当のソースコード

html
1        <div id="app" class="profile-contens flex">
2          <img src="img\無料の南京錠アイコン2.jpeg" alt="パスワード">
3          <div class="password-container">
4            <input :type="inputType" id="password" placeholder="パスワード" class="profile-item password-input">
5            <span class="input-icon">
6              <span :class="iconType" @click="onClick"><img src="img\瞳のフリーアイコン2.jpeg" alt=""></span>
7            </span>
8          </div>
9        </div>
10        <div id="app" class="profile-contens flex">
11          <img src="img\無料の南京錠アイコン2.jpeg" alt="パスワード">
12          <div class="password-container">
13            <input :type="inputType" id="password" placeholder="パスワード" class="profile-item password-input">
14            <span class="input-icon">
15              <span :class="iconType" @click="onClick"><img src="img\瞳のフリーアイコン2.jpeg" alt=""></span>
16            </span>
17          </div>
18        </div>
19  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
20  <script src="app.js"></script>

css
1* {
2  margin: 0;
3  padding: 0;
4  -webkit-box-sizing: border-box;
5          box-sizing: border-box;
6}
7
8a {
9  text-decoration: none;
10}
11
12img {
13  width: 15px;
14  height: 15px;
15  margin-right: 0.5rem;
16}
17
18select {
19  width: 14rem;
20  outline: none;
21  border: none;
22  font-size: 0.5rem;
23  color: #aaa;
24  padding-bottom: .2rem;
25  border-bottom: 1px solid #ddd;
26}
27
28::-webkit-input-placeholder {
29  color: #aaa;
30  font-size: 0.5rem;
31  padding-left: 0.25rem;
32}
33
34:-ms-input-placeholder {
35  color: #aaa;
36  font-size: 0.5rem;
37  padding-left: 0.25rem;
38}
39
40::-ms-input-placeholder {
41  color: #aaa;
42  font-size: 0.5rem;
43  padding-left: 0.25rem;
44}
45
46::placeholder {
47  color: #aaa;
48  font-size: 0.5rem;
49  padding-left: 0.25rem;
50}
51
52.flex {
53  display: -webkit-box;
54  display: -webkit-flex;
55  display: -ms-flexbox;
56  display: flex;
57  -webkit-box-pack: center;
58  -webkit-justify-content: center;
59      -ms-flex-pack: center;
60          justify-content: center;
61  -webkit-box-align: center;
62  -webkit-align-items: center;
63      -ms-flex-align: center;
64          align-items: center;
65}
66
67.profile-inner {
68  width: 100%;
69  -webkit-box-orient: vertical;
70  -webkit-box-direction: normal;
71  -webkit-flex-direction: column;
72      -ms-flex-direction: column;
73          flex-direction: column;
74}
75
76
77.profile-inner .profile-items {
78  -webkit-box-orient: vertical;
79  -webkit-box-direction: normal;
80  -webkit-flex-direction: column;
81      -ms-flex-direction: column;
82          flex-direction: column;
83}
84
85.profile-inner .profile-items .profile-contens {
86  position: relative;
87  margin: 0.5rem;
88}
89
90.profile-inner .profile-items .profile-contens .profile-item {
91  width: 14rem;
92  outline: none;
93  border: none;
94  padding-bottom: .2rem;
95  border-bottom: 1px solid #ddd;
96  color: #444;
97}
98
99.profile-inner .profile-items .profile-contens .selfpr {
100  margin-top: 1rem;
101}
102
103.profile-inner .profile-items .btn {
104  width: 4rem;
105  margin: 1rem;
106  color: #fff;
107  background-color: #f10606;
108  padding: .2rem;
109  border-radius: 1rem;
110  text-decoration: none;
111  cursor: pointer;
112  cursor: hand;
113  border: none;
114  outline: none;
115  font-weight: 700;
116  font-size: 0.5rem;
117}
118
119hr.separate {
120  width: 80%;
121  display: block;
122  height: 0;
123  border: 0;
124  border-top: 1px solid #ddd;
125  margin: 2rem 0;
126  padding: 0;
127}
128
129.password-container {
130  width: 14rem;
131}
132
133.password-container .password-input {
134  width: 100%;
135  margin: 0px;
136  padding-right: 5px;
137}
138
139.password-container .input-icon {
140  position: relative;
141}
142
143.password-container .input-icon img {
144  position: absolute;
145  bottom: 2px;
146  right: 0;
147}
148

js
1new Vue({
2    el: "#app",
3    data: {
4        isChecked: false
5    },
6    computed: {
7        inputType: function () {
8            return this.isChecked ? "text" : "password";
9        },
10        iconType: function () {
11            return this.isChecked ? "eye-slash" : "eye";
12        }
13    },
14    methods: {
15        onClick: function () {
16            this.isChecked = !this.isChecked;
17        }
18    }
19})