Best way to deal with public API routes

I have a question around best practices designing publicly accessible API routes in Spark.

I'm using Spark's built-in API to pass along data to my Vue components to be displayed on pages viewable by anyone. The flow looks like this...

First, in my HTML I render the component

<tasks></tasks>

Next, in my component I make an ajax request using Axios

axios.get('/api/v1/tasks')
            .then(response => {
                this.tasks = response.data;
                 ...
            });

Finally, I render it on the screen using a template inside the component

<ul>
  <li  v-for="task in tasks">{{ task.name }}</li>
</ul>

Everything works great until I realize the anyone can access the url '/api/v1/tasks' and view all of the json data. I have alleviated some concerns by creating transformers, so that I'm not dumping out all of the fields. I have also created pagination, so that I can handle pagination in my views.

This is obviously a basic example of an end point with not much data in it. In my actual app, I have tons of content that I'm rendering on the page. I'm concerned that web crawlers and scrapers will be able to easily steal content this way as the API responses are very organized.

My alternative solution to using Spark API routes was to get all of the tasks and pass them server-side from the controllers and then pass them as a prop into the component like so...

<tasks :tasks="{{ $tasks }}"></tasks>

The problem with this approach, is that when I view the source code of the page, the objects database fields are completely exposed like so...

[{"id":1,"name":"item 1","slug":"item-1", ...

There seems to be no easy answer to this problem without customizing the Spark API code and adding more security layers. Has anyone run into this same problem or needed to do this? How would you recommend getting data into Vue components without public api routes?