vue.js渲染问题

Question

vue.js渲染问题。不知道你们有没有遇到过，偶尔会出现数据没渲染出来，必须刷新才能渲染出来，这样的问题怎么解决？
已经ajax异步了，也用了vue的生命周期函数，但是还是有这种问题。
bootstrap 模态弹窗show的时候调用newlotteryItem并传入dom节点跟当前窗口。

var newlotteryItem = function(localecontent,dialog){
    var vm = new Vue({
        el: localecontent,
        data:{   
            showerror:false,//pass validat or not
            pagetitle:'新建现场抽奖',//page title
            prizedata:'',//prize list data
            generatingMode:[
                '逐一产生','一次产生'
            ],//generation mode
            prizetheme:'',//lotter theme
            prizeinstro:'',//lotter instruction
            prizeList:[//main structure,prize item
                {   
                    awardsName:'',
                    prizeId:'--请选择奖品名称--',
                    prizeMan:'',
                    generatingMode:'逐一产生'
                }
            ]
        },
        ready:function(){
            var thisContruct = this;
            $.ajax({
                type:"post",
                url:contextPath + "/WxPrize/pageJson.koala?pagesize=1000&page=0",
                async : true,
                success:function(result){
                    thisContruct.$data.prizedata = result.data;
                }
            })
        },
        method:function(){}
    })   
}    

Answer 1

我遇到的问题是因为命名冲突，这个项目大范围使用了bootstrap的模态组件，我直接用的modal-content类作为el，所以再次有模态组件调用的时候就会出现冲突。
其实是个很基础的问题，只是没注意忽略了，问题一直存在了半个月，我很羞愧。
各位回答的都很好，虽然并没有解决我的问题，但是总结了很多vue的基础，对于我使用vue跟前端开发都有非常大的帮助，可以说是获益良多，感谢至极，我将总结合并一下。
1.使用框架，就用框架的规则，使用生命周期函数来做数据的更改，处理函数写在method里面使用vm.函数调用。
2.ajax是异步的，不到万不得已不要使用同步，因为同步真的很阻塞，亲身体会。比如有5个回填数据的输入框，第二个输入框使用同步，那么第二个没完成之前下面输入框的全是空的，这样是不是很影响体验？
3.ajax方式get有缓存，post没有，注意使用方式。

感谢三位大神的帮助 @leftstick @GoldyMark @林岑影

Answer 2

var vm = new Vue({
    el: localecontent,
    data: {   
        showerror:false,//是否通过验证
        pagetitle:'新建现场抽奖',//页面标题
        prizedata: [],//奖品列表data
        generatingMode:[//产生方式
            '逐一产生','一次产生'
        ],
        prizetheme:'',//抽奖主题
        prizeinstro:'',//抽奖说明
        prizeList:[//主数据结构，奖项
            {   
                awardsName:'',
                prizeId:'--请选择奖品名称--',
                prizeMan:'',
                generatingMode:'逐一产生'
            }
        ]
    },
    ready: {
        $.ajax({
            type:"get",
            url:contextPath + "/WxPrize/pageJson.koala?pagesize=1000&page=0",
            async : false
        }).done(function(result){
            this.getprizedata = result.data;
        })
    },
    methods: {}
})

Answer 3

估计是你取数据的时机不对吧，你在什么地方调用ajax拿数据的？

同志，你那么搞铁定有问题啊，ajax是异步操作，哪能那么写，改改吧：

var newlotteryItem = function(localecontent){
    //ajax get prize id name
    $.ajax({
        type:"get",
        url:contextPath + "/WxPrize/pageJson.koala?pagesize=1000&page=0",
        async : false
    }).done(function(result){
        var getprizedata = result.data;

        //prize data structure
        var prizeData =
        {
            showerror:false,//是否通过验证
            pagetitle:'新建现场抽奖',//页面标题
            prizedata:getprizedata,//奖品列表data
            generatingMode:[//产生方式
                '逐一产生','一次产生'
            ],
            prizetheme:'',//抽奖主题
            prizeinstro:'',//抽奖说明
            prizeList:[//主数据结构，奖项
                {
                    awardsName:'',
                    prizeId:'--请选择奖品名称--',
                    prizeMan:'',
                    generatingMode:'逐一产生'
                }
            ]
        };

        var vm = new Vue({
            el: localecontent,
            data:prizeData,
            methods: {}
        });
    });
};

Answer 4

get请求会被浏览器缓存起来的，这个跟vue没啥关系。

建议你去chrome商店搜一下Cache killer这个插件，方便调试某些功能。