title: Vue JS How to catch errors globally and display them in a top level component
body: <p>I have set up Vue so that I have a top level AppLayout component which just includes a Navigation Menu component, the router-view and, which uses v-if to optionally display an ErrorDisplay component if the error data item is set. I set this from an err state variable in the Vuex store.</p>
  
  <p>That is where I want to get to. However, I think the problem is more fundamental.</p>
  
  <p>In a lower component, I have a submit function that gets called when I click the submit button. To test error handling I have put</p>
  
  <p>throw new Error('Cannot Submit');</p>
  
  <p>In my Main.js I have</p>
  
  <p>handlers for window.orerror, window.addEventListner, Vue.config.errorhandler, Vue.config.warnhandler</p>
  
  <p>All of these should just call the errHandler function, which just calls an action to update the err variable in the state. The hope being that this will then result in the ErrorDisplay component showing on my top level component.</p>
  
  <p>However, I have console.log statements as the first statement in all the above handlers and in my errHandler function. None of these console.logs are getting executed. </p>
  
  <p>In the Console in Chrome, I am just seeing 
  [vue warn]: Error in v-on handler: "Error: Cannot Submit"</p>
  
  <p>So it is getting the text from my throw, but none of the error handlers seem to be capturing this?</p>