vue.js如何实现点击按钮动态添加li?

<!DOCTYPE html>
<html>

        <head>
                <meta charset="UTF-8">
                <title></title>
                <script type="text/javascript" src="js/vue.js" ></script>
        </head>

        <body>
                <div >
                        <button v-on:click="ss">保存 </button>
                        <ul>
                                <li is="todo-item" v-for="(todo, index) in todos"  v-text="sv" v-on:click="hh"></li>
                        </ul>
                </div>
        </body>
        <script>
                Vue.component('todo-item', {
                        template: `
                        <li v-on:click="$emit('click')">
                                {{ text }}
                </li>`,
                        props: ['text']
                })
                new Vue({
                        el: '#todo-list-example',
                        data: {
                                todos: [
                                        '+添加'
                                ],
                                sv:'+添加'
                        },
                        methods: {
                                ss: function() {
                                        this.todos.push(this.sv)
                                },
                                hh:function(){
                                        alert(1)
                                }
                        }
                })
        </script>

</html>