title: Vue-strap Radio Buttons not working with vue.js
body: <p>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. </p>
  
  <p>Here is what I had before:</p>
  
  <pre><code>&lt;div class="col-lg-6"&gt;
    &lt;div class="form-group"&gt;
      &lt;div class="radio"&gt;
      &lt;label&gt;
        &lt;input type="radio" value="Broker" checked="checked" required v-model="contactConnection"&gt; Broker
      &lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="radio"&gt;
      &lt;label&gt;
      &lt;input type="radio" value="Relationship Manager" required v-model="contactConnection"&gt; Relationship Manager
      &lt;/label&gt;
      &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS (vue.js)</p>
  
  <pre><code>    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,
    }
  </code></pre>
  
  <p>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.</p>
  
  <p>I now have this using vue-strap:</p>
  
  <pre><code>  &lt;radio-group :value.sync="contactConnection" type="primary"&gt;
                        &lt;radio value="Broker"checked&gt;Broker&lt;/radio&gt;
                        &lt;radio value="Relationship Manager" &gt;Relationship Manager&lt;/radio&gt;
    &lt;/radio-group&gt;
  </code></pre>
  
  <p>JS - Vue.js (vue-strap)</p>
  
  <pre><code>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,
  </code></pre>
  
  <p>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  <code>&lt;radio-group :value.sync="contactConnection"</code> </p>
  
  <p>How can I do it so the contactConnection value changes dynamically like it used to before I used vue-strap?</p>