<ul v-scope @mounted="$el.hidden = false; getPeople()" hidden>
  <li v-for="item in items">
    <strong>{{ item.name }}</strong>
    <div v-text="item.films.length + ' films'" />
  </li>
</ul>
import { createApp } from "https://unpkg.com/petite-vue?module";

createApp({
  // exposed to all expressions
  items: [],
  // getters
  get plusOne() {
    return this.count + 1;
  },

  // methods
  async getPeople(url = `https://swapi.dev/api/people`) {
    const resp = await fetch(url).then((res) => res.json());
    this.items = this.items.concat(resp.results);
    console.log(this.items);

    // fetch the next
    if (resp.next) {
      this.getPeople(resp.next);
    }
  }
}).mount();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.