How to activate textbox depending on checkbox checked and get values from textbox using v-model in Vue js and javascript?

I am new to Vue js. I am trying to do an action form for the rest of API, but I am stuck at this point.

My action form:

<div class="form-group">
   <label class="required"> Social Media </label>
   <b-form-checkbox value="Facebook" v-model="selected"> FaceBook </b-form-checkbox>
   <b-form-checkbox value="Instagram" v-model="selected"> Instagram </b-form-checkbox>
   <b-form-checkbox value="Twitter" v-model="selected"> Twitter </b-form-checkbox>
   <b-form-checkbox v-on:click="onclick()" v-model="selected" > Other:</b-form-checkbox>
      <input type="text" class="form-control" :disabled='isDisabled'>
   <span class="mt-3">Selected: <strong></strong></span>
</div>

My Vue instance

export default {
    data() {
        return {     
            selected: []     
        };
    }

My Output:

Expected output when the checkbox of 'Other' is checked with an input value of 'Friends':

Selected: [ "Facebook", "Instagram", "Twitter", "Friends" ]