vue bootstrap checkbox not returning selected checks

I have a parent component that I would like to pass props to the child component, which creates a button with checkboxes. When I pass props to create the list of checkboxes, this works fine. However, when trying to return the array of selected boxes that have been checked, it returns empty. Unclear what is going on here given that I am able to pass the props through.

My end game here is returning the array back to the parent, however, I can't even get the child to return the array.

Parent Component:

<template id="front">    <b-container style="margin-top: 9rem">      <b-row>        <b-col>          <filters            button_title="filter_data[0].button_title"            :tab_column="filter_data[0].tab_column"            :button_selections="filter_data[0].button_selections"          ></filters>        </b-col>      </b-row>    </b-container>  </template>    <script>  import filters from '../components/filters' // import the Header component    export default {    name: 'TM',    components: {      filters,    },    data() {      return {        filter_data: [          {            button_title: 'Status',            tab_column: 'Employee_Status',            button_selections: [              { text: 'Active', value: 'Active' },              { text: 'Terminated', value: 'Terminated' },            ],          },        ],      }    },  }  </script>  

Child Component:

<template>    <b-dropdown :text="button_title">      <b-form-group v-slot="{ ariaDescribedby }">        <b-form-checkbox          v-for="choice in button_choices"          :key="choice.value"          v-model="selected.all_selections"          :value="choice.value"          :aria-describedby="ariaDescribedby"          name="flavour-3a"          @change="try_filter"          ></b-form-checkbox        >      </b-form-group>    </b-dropdown>  </template>  <script>  export default {    name: 'Filters',    props: {      button_title: String,      tab_column: String,      button_selections: String,    },    data() {      return {        button_choices: [],        selected: { all_selections: [] },      }    },    created() {      this.button_choices = JSON.parse(this.button_selections)    },    mounted() {      this.try_filter()    },    methods: {      try_filter() {        console.log(this.selected)      },    },  }  </script>  

https://stackoverflow.com/questions/66083452/vue-bootstrap-checkbox-not-returning-selected-checks February 07, 2021 at 08:37AM