Example Vue/Django App Updated

api.py

@login_required
def bookmarks(request):
  data = [b.data() for b in Bookmark.objects.filter(user=request.user)]
  return JSONResponse(data=dict(bookmarks=data))

App.vue

<template>
  <div class="bookmark-list" v-if="authed">
    <button @click="refresh">Refresh</button>
    <div v-for="(bookmark, index) in bookmarks" :key="index">
      <a :href="bookmark.url">{{ bookmark.title }}</a>
    </div>
  </div>
  <div class="auth" v-else>
    <AuthForm />
  </div>
</template>

<script>
import api from './api';
import AuthForm from './AuthForm.vue';

export {
  components: { AuthForm },
  data() {
    return {
      bookmarks: [],
    }
  },
  methods: {
    refresh() {
      api.getBookmarks(data => {
        this.bookmarks = data.bookmarks;
      });
    }
  },
  computed: {
    authed() { ... },
  },
  watch: {
    authed: {
      immediate: true,
      handler() {
        if (this.authed) {
          this.refresh();
        }
      }
    }
  }
}
</script>

models.py

class Bookmark(models.Model):
  user = models.ForeignKey(User, on_delete=models.CASCADE)
  title = models.CharField(max_length=250)
  url = models.CharField(max_length=500)
  
  def data(self):
    return dict(title=self.title, url=self.url)