title: Vuejs, I need to reset page focus on route change
body: <p>In a SPA,, specifically Vuejs, I need to reset the tab index of the page when I access a new route</p>
  
  <p>I tried this:</p>
  
  <pre><code>watch: {
      $route (to, from) {
          document.getElementById('content').focus()
          // or
          // document.body.focus()
          // or
          // window.focus()
      }
  }
  </code></pre>
  
  <p>I tried placing the same code to:</p>
  
  <pre><code>beforeRouteEnter (to, from, next) {
      next(vm =&gt; vm.resetFocus())
  },
  methods: {
      resetFocus() {
          document.getElementById('content').focus()
          // or
          // document.body.focus()
          // or
          // window.focus()
      }
  }
  </code></pre>
  
  <p>I AM ABLE to set focus on a ref="focus" in my main template but this gets the element displayed and it is not an ideal scenario. I need window or body to be focused as it is when the page loads.</p>
  
  <p>Component template: </p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="app"&gt;
      &lt;a class="sr-only sr-only-focusable skip-link" ref="focus" href="#content"&gt;Go to main content&lt;/a&gt;
      &lt;navigation&gt;&lt;navigation/&gt;
      &lt;main id="content"&gt;
          &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/main&gt; 
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>In my component code:</p>
  
  <pre><code>    methods: {
          setFocus(){
              this.$refs.focus.focus()
          }
      },
      watch:{
          $route (to, from){
              this.setFocus()
          }
      },
  </code></pre>
  
  <p>Neither attempts give me any results..</p>