title: Vue 2 not setting component data when page is refreshed
body: <p>I am having a rather strange problem with vue (v2.6.14) in which I am creating a new array based on one receive as a prop. Here's the relevant code:</p>
  <pre><code>props: { employees: Array },
  data() {
    return {
      sortedEmployees: [],
    };
  },
  mounted() {
    this.sortedEmployees = this.employees.slice(0);
  },
  </code></pre>
  <p>Essencially what I want here is to create a new reference for the employees array so that I can sort it to display later without actually altering the original array. I am not worried about cloning the actual objects inside the array since I will not alter them.</p>
  <p>The problem with this is that, when the app 'hot reloads'(due to some change in the code) it works as expected, the hook is called and the component data is set according to what is expected BUT if I actually refresh the page in the browser, even though the hook is called, the component data is not set and I end up with an empty array. I can solve this by setting up a watcher to the prop and then it would set the data there, but what I am interested here is understanding what's happening. If the hook is called when the page is refreshed why doesn't it set the data properly as it does when 'hot reloading'?</p>
  <p>I have a minimal setup created with vue-cli, no fancy configurations whatsoever. Any clue what I might be missing?</p>