Error in render function: "TypeError: Cannot read property of undefined" in Vue

You are seeing this error because you are initializing "board" to an empty array. The component tries to evaluate "board.category.title" when it binds the reactivity just prior to the created() hook.

With board set as an empty array, step by step the evaluation might look like this:

const board = [];const category = board.category; // undefinedconst title = category.title; // TypeError, because category is undefined

You should stop seeing this error if you initialize your data like so:

data() {  return {    board: {      category: {        title: ''      }    }  }}

Here is the Vue lifecycle diagram which illustrates when the created() event is fired

This error is explained in the official Vue documentation:

Since Vue doesn’t allow dynamically adding root-level reactive properties, you have to initialize Vue instances by declaring all root-level reactive data properties upfront, even with an empty value:

var vm = new Vue({  data: {    // declare message with an empty value    message: ''  },  template: '<div>{{ message }}</div>'})// set `message` latervm.message = 'Hello!'

If you don’t declare message in the data option, Vue will warn you that the render function is trying to access a property that doesn’t exist.