title: Vuejs input file form
body: <p>In my vue-bootstrap application I would like to use hidden input file control. When I use the standard input component it works (Load 1). If i try to do the same with the reactive component form vue-bootstrap library it does not work (Load 2). I would appreciate any hints what I might be doing wrong.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>app = new Vue({
    el: "#app",
    data: {
      files: '',
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" &gt;
    &lt;script src="https://unpkg.com/vue"&gt;&lt;/script&gt;
    &lt;script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="app"&gt;
      &lt;div&gt;
        &lt;b-button @click="$refs.fileInput1.click()"&gt; Load 1&lt;/b-button&gt;
        &lt;input type="file" ref="fileInput1"  style="display:none;"/&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;b-button @click="$refs.fileInput2.click()"&gt; Load 2&lt;/b-button&gt;
        &lt;b-form-file v-model="files" style="display:none;" ref="fileInput2" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>