Vue.js　クリックでfontawsomeのアイコンを切り替える

Vue.jsを学習中（超初心者）でプランナーを作成しています。リスト一覧にfontawsomeの四角アイコンをデフォルトで表示し、クリックされたらチェックマークの四角アイコンに変えたいのですが、うまくいきません。

入力フォームで入力された内容と"checked=false"をpropsで渡しています。
リストでは　"v-if="goal.checked"ならチェックマークの四角アイコン、"v-else"なら四角アイコンを表示するよう<i>タグを書き、その<i>タグを囲んだ<div>タグに@clickを設定しています。

まず、"checked=false"を渡しているので、リスト一覧には全て四角アイコンが表示されます。その中のひとつをクリックすると、そのアイコンがチェックマークの四角アイコンに変わります。ここまでは希望通りです。更に他の四角アイコンやチェックマークに変えた四角アイコンをクリックすると、エラーが発生します。

一度めのクリックイベントは正常に動くのに次のクリックでエラーになってしまいます。2日悩みましたが解決に至らないので、質問させていただきました。

発生している問題・エラーメッセージ

「vue.esm.js:1896 TypeError: clicked is not a function」
「vue.esm.js:629 [Vue warn]: Error in v-on handler: "TypeError: clicked is not a function"」

該当のソースコード

app.js
1Vue.component('display-area', {
2	props: {
3		goals: {
4			type: Array,
5			required: true
6		}
7	},
8	template: `
9        <div class="display-area">
10            <div class="main">
11                <div class="display-area-left">                
12                    <ul>
13                        <li class="goal-name" v-for="(goal, index) in goals">
14                            <div @click.stop="clicked(index)">
15                                <v-fa v-if="goal.checked" class="check-square" :icon="['fas', 'check-square']" />
16                                <v-fa v-else class="square" :icon="['far', 'square']" />
17                            </div>
18                            <span @click="showGoalDetails(index)">{{ goal.name }}</span>
19                            <v-fa class="trash" :icon="['fas', 'trash-alt']" />
20                        </li>
21                    </ul>
22                </div>
23                
24            </div>  
25        </div>
26    `,
27	data() {
28		return {	
29			selectedGoal: 0
30		}
31	},
32	methods: {
33		showGoalDetails: function(index){
34			this.selectedGoal = index
35		},
36		clicked(index) {
37			this.clicked = index
38			if(this.goals[this.clicked].checked){
39				this.goals[this.clicked].checked = false
40			}else{
41				this.goals[this.clicked].checked = true
42			}				
43		}
44	},
45	computed: {
46		names() {
47			return this.goals[this.selectedGoal].name
48		}
49	}
50})
51