Vuexで動的にコンポーネントを追加する方法

Question

前提・実現したいこと

VuexとDjangoによる旅行の日程を作成するプログラムを作成しています。
観光地を追加のボタンをクリックしたら、観光地と移動手段の入力欄が追加されるようにしたいです。

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

importしてきた子のコンポーネントをクリックされるたびに追加できるようにしたいのですが、その方法がわからない状態です。

該当のソースコード

<template>
   <div class="container-fluid">
         <div class="row d-flex justify-content-center mt-5">
            <div class="col-md-8 col-xl-6">
                <div class="row mb-5">
                    <trip-detail v-for="item in trips" v-bind:key="item.id" v-bind="item"></trip-detail>
                    <transport v-for="tran in trans" v-bind:key="tran.id" v-bind="tran"></transport>
                    <trip-detail v-for="item in trips" v-bind:key="item.id" v-bind="item"></trip-detail>
                </div>
                <button class="btn btn-outline-success" type="button">観光地を追加</button>
            </div>
        </div>
    </div>
</template>

<script>
import TripDetail from '../components/TripDetail.vue'
import Transport from '../components/Trans.vue'

export default {
    data(){
        return {
            trips: [
            {id: 1, name: 'spot', placeholder: '観光地'},
            {id: 2, name: 'hours', placeholder: '滞在時間'},
            {id: 3, name: 'money', placeholder: '料金'},
            ],
            trans: [
                {id: 1, name: 'howTo', placeholder: '移動手段'},
                {id: 2, name: 'howLong', placeholder: '所要時間'},
                {id: 3, name: 'fee', placeholder: '料金'},
            ],
        }
    },
    components: {
        'trip-detail': TripDetail,
        'transport': Transport,
    },
}
</script>

<template>
    <div class="col-4">
        <input type="text" class="form-control" v-bind:name="name" v-bind:placeholder="placeholder">
    </div>
</template>

<script>

export default {
    props: {
        'name': String,
        'placeholder': String,
    },
}
</script>

<template>
    <div class="col-3 mt-3 mb-3">
        <input type="text" class="form-control" v-bind:name="name" v-bind:placeholder="placeholder">
    </div>
</template>

<script>
export default {
    props: {
        'name': String,
        'placeholder': String,
    }
}
</script>

試したこと

buttonにv-onを記述して、methodsなどで追加するのが良いのかと思っておりますが、この方法もやり方がわからない状態です。

補足情報（FW/ツールのバージョンなど）

以下のような追加の方法を行いたいです。

vue.js 2.x
vue/cli 4.5.13
Visual Studio Code v1.53.2
MacOS Darwin x64 20.3.0

Answer 1

なんとかボタンをクリックしたら、importしてきたコンポーネントを追加する方法を知ることができました。
StackOverFlowのDynamically adding different components in Vueに書いてあったのを使わせてもらいました。

StackOverFlowの方では複数回ボタンをクリックしてもコンポーネントを追加できるのですが、自分の方では一回しかコンポーネントを追加することができませんでした。

一応こちらにやり方を載せておきたいと思います。

<template>
   <div class="container-fluid">
        <div class="row d-flex justify-content-center mt-5">
            <div class="col-md-8 col-xl-6">
                <div class="row mb-5">
                    <trip-detail v-for="item in trips" v-bind:key="item.id" v-bind="item"></trip-detail>
                    <transport v-for="tran in trans" v-bind:key="tran.id" v-bind="tran"></transport>
                    <component v-for="field in fields" v-bind:is="field.type" v-bind:key="field.id"></component>
                </div>
                <button class="btn btn-outline-success" v-on:click="addTransport()" type="button">観光地を追加</button>
            </div>
        </div>
    </div>
</template>

<script>
import TripDetail from '../components/TripDetail.vue'
import Transport from '../components/Trans.vue'

export default {
    data(){
        return {
            trips: [
            {id: 1, name: 'spot', placeholder: '観光地'},
            {id: 2, name: 'hours', placeholder: '滞在時間'},
            {id: 3, name: 'money', placeholder: '料金'},
            ],
            fileds: [],
            count: 0,
        }
    },
    components: {
        'trip-detail': TripDetail,
        'transport': Transport,
    },
    methods: {
          addTransport: function(type){
              this.fileds.push({
                  type: type,
                  id: this.count++
              })
          }
    }
}
</script>

<template>
    <div class="col-4">
        <input type="text" class="form-control" v-bind:name="name" v-bind:placeholder="placeholder">
    </div>
</template>

<script>

export default {
    props: {
        'name': String,
        'placeholder': String,
    },
}
</script>

<template>
    div class="row">
        <div class="col-3 mt-3 mb-3">
            <input type="text" class="form-control" name="howTo" placeholder='移動手段'>
        </div>
        <div class="col-3 mt-3 mb-3">
            <input type="text" class="form-control" name="howLong" placeholder='所要時間'>
        </div>
        <div class="col-3 mt-3 mb-3">
                <input type="text" class="form-control" name="fee" placeholder='料金'>
        </div>
    </div>
    <div class="row">
        <div class="col-4">
                <input type="text" class="form-control" name="spot" placeholder='観光地'>
        </div>
        <div class="col-4">
                <input type="text" class="form-control" name="hours" placeholder='滞在時間'>
        </div>
        <div class="col-4">
            <input type="text" class="form-control" name="money" placeholder='料金'>
        </div>
    </div>
</template>