JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">
<div id="vueapp">
  <label class="typo__label">選擇核心技能</label>
  <multiselect v-model="selectedObjects" tag-placeholder="Add this as new tag" placeholder="Search or add a tag" label="tag_name" track-by="tag_id" :options="options" :multiple="true" :taggable="true"    

    @remove="removeSelectedSkill">

  </multiselect>
  <label class="typo__label">技能測試標籤</label>
  <div>
    <fieldset>
        <span v-for="option in selectedObjects">
          <label v-for="skill in option.skills">
              <input type="checkbox" v-bind:value="skill.id" v-model="postdata" />
               <span>{{skill.skill_name}}</span>&#160;&#160;
          </label>
        </span>
    </fieldset>
    {{postdata}}
  </div>
</div>

JavaScript

Vue.component('multiselect', window.VueMultiselect.default)

// 接進來的api
const optionsFromWeb = [
  {
  "tag_id": 1, "tag_name": "Domain Service",
   "skills": [{ "id": 1, "skill_name": "Windows AD" }, { "id": 2, "skill_name": "LDAP" }]
  },{
  "tag_id": 2, "tag_name": "EMail service","skills": [{ "id": 3, "skill_name": "SMTP" }, { "id": 4, "skill_name": "ExCHANGE ONLINE" }]
  },{
   "tag_id": 5, "tag_name": "Web Proxy",
   "skills": [{ "id": 5, "skill_name": "EMail Gateway" }, { "id": 6, "skill_name": "Microsoft Exchange" }]
  }]                   
                 
 
  var app = new Vue({
            el: '#vueapp',
            components: { Multiselect: window.VueMultiselect.default },
            data() {
                return {
                   selectedObjects:[],
                   options: [],                   
                   offersData: [],//技能box
                   postdata: []
                }
            },
            created(){
             // 這裡換成你要怎麼接api
             this.options = optionsFromWeb
            },
            methods:{
              // 當移除核心技能時，順便移除已選擇的技能測試的選項
              removeSelectedSkill(removedOption){
                const removedSkills = removedOption.skills.map((s)=> s.id)
                this.postdata = this.postdata.filter(item => !removedSkills.includes(item))
              }
            }
})