Today my workmate hit an issue that v-if didn't work for him.
It turned out that Vue.js can't watch the property that you do not define at the beginning.

Root Cause

It's not only relative to v-if. It impact all functions that used two-way data binding.

On below demo, we have two section that both of them hope to change content by button clicking. Section 1 works good but section 2 didn't.

It's because section2 object(in js) doesn't define content property.
So after Vue runs up, the new property that you add afterward can't be watched by Vue. And then you will fine your change will not reflect to web page even if you change the value of the property.

In this demo, I tried to change the content of section 2 but it didn't work. In my workmate's case, it change the value of a property but v-if was not triggered.

Live Demo: https://jsfiddle.net/Lawrence/7eq3y5uv/

Look Deeper

When Vue.js starts, it will convert all data into observable. The key is how Vue.js do that here.

Vue.js will bind Watcher on each properties of an object by defining set method using Object.defineProperty. Therefore Vue.js can get updated if you change the value.

Apparently, if you don't define an property for an object at the beginning, Vue.js can't watch it.

这是由荷兰程序员 Gabor de Mooij 提出的一种比较简单的方法。Gabor de Mooij 称之为 minimalist approach。现摘录如下：

定义一个 Foo 类

var Foo = {
    createNew: function(){
        var instance = {};
        instance.description = "A new class instance";
        instance.bar = function() { console.log(instance.description)};
        return instance;
    }
}

创建一个 Foo 实例

var foo = Foo.createNew();
foo.bar();

类的继承

var NewFoo = {
    createNew = function(){
        var instance = Foo.createNew();
        instance.title = "A new title";
        instance.newBar = function(){
            alert(instance.description);
        };
    }
}

私有方法和属性

var Foo = {
    createNew: function(){
        var instance = {};
        instance.description = "A new class instance"; //description 是私有的，只有通过 bar() 来访问
        instance.bar = function() { console.log(instance.description)};
        return instance;
    }
}

静态成员变量

var Foo = {
    id: 101010; // id 在多个实例间共享
    createNew: function(){
        var instance = {};
        instance.description = "A new class instance"; //description 是私有的，只有通过 bar() 来访问
        instance.bar = function() { console.log(instance.description)};
        return instance;
    }
}

var foo1 = Foo.createNew();
var foo2 = Foo.createNew();
foo2.id = 233333;
console.log("Foo id:"+foo1.id);

As for the reason only string can be stored in localStorage, an object need to be converted to string format (JSON text).

Save object

var books = [{id:3, name:"From Zero To One"}, {id:4, name:"Head First Java"}];
localStorage.setItem("books", JSON.stringify(books));

Load object

var booksJSON = localStorage.getItem("books");
if( booksJSON == null ){
    // No data stored in the localStorage
    return;
}
var books = JSON.parse(booksJSON);
for(var i=0; i < books.length; ++i) {
    var book = books[i];
    var id = book.id;
    var name = book.name;
}