title: Force refresh of an affix in Vue
body: <p>I am using a bootstrap affix within a Vue JS page. When I first navigate to the route containing the affix (the affix visibility is controlled via <code>v-if</code>), it works perfectly with scrolling. However, when I navigate <em>away</em> from that route and then <em>back</em> again, the affix is broken: it is stuck at the top of the page and doesn't scroll.</p>
  
  <p>I have found online that, were I using jquery, I could call <code>$('#affix').affix('checkPosition')</code> to force the affix to reposition (but I don't have access to jquery).</p>
  
  <p>I suspect the issue is that Vue is creating the affix on the first load, and then caches the same DOM object to be used later. But when it is re-inserted into the page, bootstrap is no longer aware of it and the affixing behavior breaks.</p>
  
  <p>At this point, I think I have a few options, any of which would solve this problem:</p>
  
  <ul>
  <li>Is there a smart way to call Jquery from within a Vue component? I'm not using Jquery anywhere else, so would rather not.</li>
  <li>Is there a way to force Bootstrap affixes to refresh?</li>
  <li>Is there a way to force Vue to not cache this component, creating a new one every load?</li>
  <li>Is there a better way of creating an affix with Vue?</li>
  </ul>
  
  <p>Thanks!</p>
  
  <p>Here is the Vue component of concern:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="funclist-affix" class="panel panel-default" data-spy="affix" data-offset-top="155"&gt;
      &lt;div class="panel-body"&gt;
        &lt;h4&gt;Functions&lt;/h4&gt;
        &lt;div class="list-group function-list"&gt;
          &lt;router-link v-for="(func,line) in functions" :key="line" :to="'#' + func.name" :class="['list-group-item', 'code', {uncovered: func.uncovered}]" :title="func.name"&gt;{{ func.name }}&lt;/router-link&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  export default {
    name: 'functionList',
    data () {
      return {
  
      }
    },
    props: ['functions']
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  a {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  
  #funclist-affix {
    max-height: calc(100% - 2 * 20px);
    overflow-y: auto;
  }
  &lt;/style&gt;
  </code></pre>