Mongoose/Mongodb basic trello like scheme problem with rendering in vue

I'm creating a very basic functionality kanban board.

My board has 4 models so far:

User model

var userSchema = new Schema({
  name: {
    type: String,
    required: true
  }
})

module.exports = mongoose.model('User', userSchema)

Board model

var boardSchema = new Schema({
  title: {
    type: String,
    required: true
  },
  lists: [ listSchema ]
  members: [
    {
      type: Schema.Types.ObjectId,
      ref: 'user'
    }
  ]
});

module.exports = mongoose.model('Board', boardSchema)

List schema

let listSchema = new Schema({
  title: {
    type: String,
    required: true
  },
  userCreated: {
    type: Schema.Types.ObjectId,
    required: true,
    ref: 'user'
  },
  boardId: {
    type: Schema.Types.ObjectId,
    required: true,
    ref: 'board'
  },
  sort: {
    type: Number,
    decimal: true,
    required: true
  }
})

module.exports = mongoose.model('List', listSchema)

Card schema

var cardSchema = new Schema({
  title: {
    type: String,
    required: true
  },
  description: {
    type: String
  },
  boardId: {
    type: Schema.Types.ObjectId,
    required: true,
    ref: 'board'
  },
  listId: {
    type: Schema.Types.ObjectId,
    required: true,
    ref: 'list'
  },
  members: [
    {
      type: Schema.Types.ObjectId,
      ref: 'user'
    }
  ],
  sort: {
    type: Number,
    decimal: true,
    required: true
  }
})

module.exports = mongoose.model('Card', cardSchema)

What am I looking for?

My front-end is made with Vue.js and sortable.js drag and drop lib.

I want to find the best way to render board with lists (columns) and cards in them.

From what I understand, I should get my board first, by the users id in members array.

Then I have my board which has lists embedded already.

On second api request, I get all the cards by boardId.

My question is - how do I correctly put/render all the cards into each owns lists?

So in the end I want to have something like:

{
  title: 'My board',
  lists: [
    {
      title: 'My list',
      _id: '35jj3j532jj'
      cards: [
       {
        title: 'my card',
        listId: '35jj3j532jj'
       }
      ]
    },
    {
      title: 'My list 2',
      _id: '4gfdg5454dfg'
      cards: [
       {
        title: 'my card 22',
        listId: '4gfdg5454dfg'
       },
       {
        title: 'my card 22',
        listId: '4gfdg5454dfg'
       }
      ]
    }
  ]
  members: [
    'df76g7gh7gf86889gf989fdg'
  ]
}

What I've tried?

I've came up with only one thing so far, that is:

1. Two api calls in mounted hook - one to get the board with lists, second to get all cards.
2. Then I loop trough lists and loop trough cards and push each card into the list by id?

But this way it seems that my lists would need to have an empty array called cards: [] just for the front-end card-to-list sorting by id, seems somehow wrong.

Is this a good way? Or should I redesign my models and schemas and go with some other way? Any help would be appreciated!

from Mongoose/Mongodb basic trello like scheme problem with rendering in vue