vue.js v-selectで選んだ値から特定キーの値を取得する方法

Question

v-selectで選んだ値の中で特定キーの値だけを取得したいですが、方法がよくわからずこちらに質問します。

<tempate lnag="pug">
  v-select(v-model="selected"  multiple :options="options")
  input(type="hidden" name="addclubs" :value="selected")
  p {{selected}}

  .border-list
    template(v-for="(item, key) in selected")
      .border-list_title
        span {{ item }}
</template>
<script>
export default {
  data() {
    return {
      options: [{code: 'CA', label: 'Canada'},{code: 'JA', label: 'Japan'}],
      selected: [],
    }
  },
  ...
</script>

上記コードでCanada,Japanを両方選択すると

p {{selected}}の結果

[ { "code": "CA", "label": "Canada" }, { "code": "JA", "label": "Japan" } ]

span {{ item }}の結果

{ "code": "CA", "label": "Canada" }
{ "code": "JA", "label": "Japan" }

になりました。

ここでspan {{ item }}の結果は

Canada
Japan

にしたく

span {{ item.label }}

に変更しましたが、なぜか値は変わらないままでした。

p {{selected}}の結果も同じく

CA
JA

にしたいですが、
方法がよくわかりませんでした。

参考にできる情報でもよいのでご教示いただける幸いです。
よろしくおねがいします

Answer 1

v-select でoptionsを使っているので Vue.js というか vue-select のことでしょうか。
ライブラリを使っているのならばそれを書いたほうが答えやすいです。（Vuetifyもv-selectを使うので最初そちらかと思いました）

Returning a single key with reduce にある reduce を使えばできそうな気がします。