Vue-strap Radio Buttons not working with vue.js

I have some radio buttons in my web application that I am creating with vue.js that all worked nicely however when I decided to use bootstraps style of radio buttons it kind of mucked up. I realize I have to use vue-strap for the data binding to work correctly for bootstrap styled radio buttons in vue.js however I still can't seem to get it to work as well as before.

Here is what I had before:

<div class="col-lg-6">
  <div class="form-group">
    <div class="radio">
    <label>
      <input type="radio" value="Broker" checked="checked" required v-model="contactConnection"> Broker
    </label>
    </div>
    <div class="radio">
    <label>
    <input type="radio" value="Relationship Manager" required v-model="contactConnection"> Relationship Manager
    </label>
    </div>
   </div>
</div>

JS (vue.js)

    data: function() {
        return {
        contactConnection: ''
        }
    }



  this.dropzoneDownload = new Dropzone("#dropzone-download", {
            url:  common.getDataHost() + "/mailmerge/doStuff?pc=" + self.contactConnection,
            paramName: "file", 
            withCredentials: true,
            maxFilesize: 5, // MB
            maxFiles: 1,
            addRemoveLinks: true,
  }

This worked fine and allowed me to pass through the connection type (depending on the radio button value selected) to my route when I dropped a file into my dropzone. However I want to use the bootstrap style of radio buttons.

I now have this using vue-strap:

  <radio-group :value.sync="contactConnection" type="primary">
                      <radio value="Broker"checked>Broker</radio>
                      <radio value="Relationship Manager" >Relationship Manager</radio>
  </radio-group>

JS - Vue.js (vue-strap)

Vue.component('component-mailmerge-bulk', {
    template: _template,
    components: {
        'radio-group': radioGroup,
        'radio': radioBtn
    },props: {
        state: {
            type: Object
        }
    },
    data: function() {
        return {
        contactConnection: ''
        }
    }

this.dropzoneDownload = new Dropzone("#dropzone-download", {
            url:  common.getDataHost() + "/mailmerge/doStuff?pc=" + self.contactConnection,
            paramName: "file", 
            withCredentials: true,
            maxFilesize: 5, // MB
            maxFiles: 1,
            addRemoveLinks: true,

This just assigns contactConnection to the checked value and doesn't change dynamically anymore upon the different radio button value being selected. I notice it doesn't use v-model anymore but rather this <radio-group :value.sync="contactConnection"

How can I do it so the contactConnection value changes dynamically like it used to before I used vue-strap?