title: Axios request giving getter setter methods instead of data queried
body: <p>I'm working with Laravel and Vue to make a single page web application. I've used Vue before to get the data from a database using a controller with no problem, but for some reason I'm now only getting a seemingly infinitely nested JS object that has getter and setter methods stored in each parent object instead of the data I queried. I've seen other people with similar issues, but the solutions that worked for them didn't work for me. For example, some people used JSON.parse(JSON.stringify(response.data)); to get just the raw data, but this doesn't work when I attempt to store it in this.actions. Here is my index method in my ActionLogController</p>
  
  <pre><code>public function index($url)
  {
  
      $companyName = explode("/", $url);
  
      if(Auth::check())
      {
          $company = Company::where('name', '=', strtolower($companyName[count($companyName) - 1]))-&gt;first();
  
          // If sortby not empty
          $sortby = "created_at";
  
          //assume desc (most recent)
          $sortdirection = 'desc';
  
          if(request()-&gt;has('sortdirection') &amp;&amp; request()-&gt;sortdirection == 'asc')
          {
              $sortdirection = 'asc';
          }
  
          // if sortby is set
          if(request()-&gt;has('sortby')) 
          {
              $sortby = request()-&gt;sortby;
  
              switch($sortby) 
              {
                  case "date":
                      $sortby = "string_date";
                  break;
                  case "company":
                      $sortby = "company_name";
                  break;
                  case "name":
                      // do nothing
                  break;
                  case "communication-type":
                      $sortby = "communication_type";
                  break;
                  case "contact":
                      // do nothing
                  break;
                  case "subject":
                      $sortby = "status";
                  break;
                  case "assigned-to":
                      $sortby = "assigned_to";
                  break;
                  case "action":
                      $sortby = "action_item";
                  break;
                  case "assigned-to":
                      $sortby = "assigned_to";
                  break;
                  default:
                      $sortby = 'created_at';
                  break;
              }
          }
      }
  
      if($sortdirection == 'asc') {
          return Auth::user()-&gt;actionLogs
              -&gt;where('activity_key', '=', '1,' . $company-&gt;id)
              -&gt;sortBy($sortby);
      }
  
      return Auth::user()-&gt;actionLogs
          -&gt;where('activity_key', '=', '1,' . $company-&gt;id)
          -&gt;sortByDesc($sortby);
  
  }
  </code></pre>
  
  <p>This is my Vue component to get the data from the controller. I know the template code works, because it worked fine when I sent it dummy data before pulling the data from the controller.</p>
  
  <pre><code>&lt;style scoped&gt;
  .action-link {
      cursor: pointer;
  }
  
  .m-b-none {
      margin-bottom: 0;
  }
  &lt;/style&gt;
  
  &lt;template&gt;
  &lt;div class="table-responsive"&gt;
      &lt;table class="table table-striped table-sm"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;&lt;a id="sortby-date" class="action-nav" href="?sortby=date&amp;sortdirection=desc"&gt;Date&lt;/a&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;a id="sortby-company" class="action-nav" href="?sortby=company&amp;sortdirection=desc"&gt;Company&lt;/a&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;a id="sortby-name" class="action-nav" href="?sortby=name&amp;sortdirection=desc"&gt;Name&lt;/a&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;a id="sortby-communication-type" class="action-nav" href="?sortby=communication-type&amp;sortdirection=desc"&gt;Communication Type&lt;/a&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;a id="sortby-contact" class="action-nav" href="?sortby=contact&amp;sortdirection=desc"&gt;Contact&lt;/a&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;a id="sortby-subject" class="action-nav" href="?sortby=subject&amp;sortdirection=desc"&gt;Subject&lt;/a&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;a id="sortby-action" class="action-nav" href="?sortby=action&amp;sortdirection=desc"&gt;Comment/Action Item&lt;/a&gt;&lt;/th&gt;
                  &lt;th&gt;Archive&lt;/th&gt;
                  &lt;!-- check if admin?? --&gt;
                      &lt;th&gt;&lt;a id="sortby-assigned-to" class="action-nav" href="?sortby=date&amp;sortdirection=desc"&gt;Assigned To&lt;/a&gt;&lt;/th&gt;
                  &lt;!-- /check if admin?? --&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody v-if="actions.length &gt; 0"&gt;
              &lt;tr v-for="action in actions"&gt;
                  &lt;td&gt;
                      {{ action.string_date }}
                  &lt;/td&gt;
                  &lt;td&gt;
                      {{ action.company_name }}
                  &lt;/td&gt;
                  &lt;td&gt;
                      {{ action.name }}
                  &lt;/td&gt;
                  &lt;td&gt;
                      {{ action.communication_type }}
                  &lt;/td&gt;
                  &lt;td&gt;
                      {{ action.contact }}
                  &lt;/td&gt;
                  &lt;td&gt;
                      {{ action.status }}
                  &lt;/td&gt;
                  &lt;td&gt;
                      {{ action.action_item }}
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="checkbox" :id="'archive-' + action.id" class="archive" :name="'archive-' + action.id"&gt;
                  &lt;/td&gt;
                  &lt;td :id="'record-' + action.id" class="assigned-to"&gt;
                      {{ action.assigned_to }}
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;p id="add-action" style="text-align: center;"&gt;
        &lt;button id="action-log-add" class="btn btn-sm btn-primary edit"&gt;Add Item&lt;/button&gt;
        &lt;button id="action-log-edit" class="btn btn-sm btn-danger edit"&gt;Edit Items&lt;/button&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      data() {
          return {
              actions: []
          }
      },
      methods: {
          getActionLogs(location) {
  
              var company = location.split("/");
              company = company[company.length - 1];
  
              axios.get('/action-log/' + company)
                   .then(response =&gt; {
  
                      this.actions = response.data;                        
                      console.log(this.actions);
  
                   })
                   .catch(error =&gt; {
                      console.log('error! ' + error);
                   });
          }
      },
      mounted() {
          this.getActionLogs(window.location.href);
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>This is the output I get in the browser console</p>
  
  <pre><code>    {…}
  ​
      1: Getter &amp; Setter
  ​
      2: Getter &amp; Setter
  ​
      3: Getter &amp; Setter
  ​
      4: Getter &amp; Setter
  ​
      5: Getter &amp; Setter
  ​
      6: Getter &amp; Setter
  ​
      7: Getter &amp; Setter
  ​
      8: Getter &amp; Setter
  ​
      9: Getter &amp; Setter
  ​
      10: Getter &amp; Setter
  ​
      __ob__: Object { value: {…}, dep: {…}, vmCount: 0 }
  ​
      &lt;prototype&gt;: Object { … }
  </code></pre>
  
  <p>I was expecting to see the normal array of data that gets returned, but this is what shows up instead and then won't update the component with the data. I'm new to Vue, so maybe there's something really easy I missing, but I can't seem to figure this out.</p>