Vue.js v-selectの選択値を配列にしてaxiosの引数に渡したいです。

Question

こちらの質問の続きになります。前回質問
現在作成している機能は
1 APIで取得した配列を１つ目のセレクトタグに表示（ここまで実装済み）
2 1のセレクトタグから選択した値を配列にし、axiosのパラメーターに渡し、APIを呼び出す
3 2の結果として取得される配列を２つ目のセレクトタグに表示する←表示されない

postmanでの結果

API２_URL?tableName=clientA&tableName=clientB

パラメーターに配列を与えれば画像のように配列の結果が取得されます。

そこで、デベロッパーコンソールでのエラーメッセージを出力させ、v-selectタグの選択値を配列にうまくまとめようとしているのですが、うまくいきません。

コンソールエラー内容

[Vue warn]: Invalid prop: type check failed for prop "options". Expected Array, got String with value "".

このエラー内容が関係してるかと踏んでいます。このエラーの解決方法並びにもし何かvue.js（v-select）で値を配列として取得する際に見落としている点などがありましたらご教授頂きたいです。
よろしくお願いします。
前回ご協力頂いた皆様ありがとうございました。

<template>
    <div class="col-sm-3 col-form-label">
        <h2>クライアント名選択</h2>
        <v-select v-model="tableSelected" v-on:change="fetchTags()" :options="tables" multiple>
          <!-- <option v-for="table in tables" :key='table.id'>{{ table }}</option> -->
        </v-select>

        <ul v-if="errors && errors.length">
            <li v-for="error of errors" :key='error.id'>
                {{error.message}}
            </li>
        </ul>
        <h2>カラム名選択</h2>
        <v-select v-model="tagSelected" :options="tags" multiple>
          <option v-for="tag in tags" :key='tag.id'>{{ tag }}</option> 
        </v-select>
        
        <ul v-if="errors && errors.length">
            <li v-for="error of errors" :key='error.id'>
                {{error.message}}
            </li>
        </ul>
        <button type="button" class="btn btn-primary">確定</button>
    </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs';

export default {
  data () {
    return {
      tables: '',
      tableSelected: [],
      tags: '',
      tagSelected: ''
    }
  },
  created () {
    axios.get('API1').then(response => {
      this.tables = response.data
    })
      .catch(e => {
        this.errors.push(e)
      })
  },        
  methods: {
    fetchTags: function () {
      axios.get('API2', {
        params: {
          tableName: this.tableSelected
        },
        paramsSerializer: (params) => {
          return qs.stringify(params, { arrayFormat: 'repeat' });
        }
      }).then(response => {
        this.tags = response.data
        })
        .catch(e => {
          this.errors.push(e)
        })
    }
  }
}
</script>

data内のtags:''→tags:[]に変更したデバッグ結果

Comments

[plasticgrammer]

エラーとしては、
optionsには配列が設定されていることを期待していたけど文字列（""）が設定されていた
というものです。

[amaturePy]

失礼しました。
tags: ''をtags: []に変更し、上記のエラーは消えました。
デバッグするとtagsには[]のように空の配列が渡っているようでした。

[plasticgrammer]

> tagsには[]のように空の配列が渡っているようでした。
これはAPI2が呼ばれた後という理解で正しいですか？
だとすると、API2のレスポンスで[]が返ってきている状態かと思います。

上記理解が正しいとすると、後はAPI2の問題のような気がするのですがいかがでしょうか。

[amaturePy]

いえ、すみません。勘違いでした。tagsに[]と入れたためにデバッグツールの方で空の[]が表示されただけでAPI2を叩いた結果ではないようです。

[amaturePy]

APIの方は配列をパラメータに設置してあげれば帰ってくる値はただの配列なので、これをただループ処理で表示させるのみで問題ないかと思います。

[plasticgrammer]

質問の情報を最新に更新くださいますようお願いします。
最新のソースと、何ができていて何ができていないのか（API2にパラメータは渡せている？）について記載頂けると助かります。

[amaturePy]

はい。今ほど追加させて頂きました。

[amaturePy]

今気づいたのですが、そもそもv-selectの中のv-on:changeが発火していないようです。
通常のselectタグではalert('ok');でアラートが確認できたのですが、上に記載しているv-selectでは表示されませんでした。
vue-selectのバージョンなども影響しているかもしれないので、調査してます。

Answer 1

v-selectタグ内のv-on:change="fetchTags()"を:on-change="fetchTags()"に変更することで解決致しました。ご協力頂いた方々ありがとうございました。
以下参考URLです。
参考