title: How to get Laravel api resource based data in Vue
body: <p>I'm trying to show user projects list where <code>user_id</code> column is match with <code>auth()-&gt;user()-&gt;id</code>.</p>
  
  <p>the problem i have is how to define what function of my resourced route to use.</p>
  
  <h1>Code</h1>
  
  <p><code>Controller</code></p>
  
  <pre><code>class ProjectController extends Controller
  {
      public function index()
      {
          $projects = Project::orderby('id', 'desc')-&gt;latest()-&gt;take(10)-&gt;get();
          return response()-&gt;json($projects);
      }
  
      public function userprojects()
      {
          $projects = Project::orderby('id', 'desc')-&gt;where('user_id', '=', Auth::user()-&gt;id)-&gt;get();
          return $projects;
      }
  }
  </code></pre>
  
  <p><code>Api route</code></p>
  
  <pre><code>Route::resource('projects', 'Api\ProjectController', ['except' =&gt; ['create', 'edit', 'destroy']]);
  </code></pre>
  
  <p><code>Vue component</code></p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="row justify-content-center"&gt;
          &lt;div class="col-md-8"&gt;
              &lt;div class="card"&gt;
                  &lt;div class="card-header"&gt;Your Published Projects &lt;span class="badge badge-info"&gt;{{projects.length}}&lt;/span&gt;&lt;/div&gt;
  
                  &lt;div class="card-body"&gt;
                      &lt;ul&gt;
                          &lt;li v-for="project in projects" :key="project.id"&gt;
                              {{project.title}} - {{project.user_id}}
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      data(){
          return {
              projects: []
          }
      },
      created(){
              this.fetchProjects();
          },
          methods:{
              fetchProjects(){
                  var self = this;
                  axios.get('api/projects')
                      .then(function (resp) {
                          self.projects = resp.data;
                  })
                  .catch(function (resp) {
                      console.log(resp);
                          alert("Could not load projects");
                  });
              },
          },
  }
  &lt;/script&gt;
  </code></pre>
  
  <h1>Question</h1>
  
  <ol>
  <li>How do I tell my component to not load <code>index</code> function but to load
  data from <code>userprojects</code> function?</li>
  </ol>