example: オブジェクトを編集するコンポーネント

App.vue

<template>
    <div>
        <Example :user.sync="user"></Example>
        <button @click.prevent="updateUser()">Save</button>
        <button @click.prevent="revertUser()">Cancel</button>
        {{ user }}
        {{ userBackup }}
    </div>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { cloneDeep } from "lodash";

import Example from "./components/Example.vue";

class User {
    public name: string = "";
    public age: number = 0;
}

@Component({
    components: {
        Example,
    },
})
export default class App extends Vue {
    public user = new User();
    public userBackup = new User();

    public mounted() {
        this.user = {
            name: "john doe",
            age: 42,
        };
        this.userBackup = cloneDeep(this.user);
    }

    public updateUser() {
        this.userBackup = cloneDeep(this.user);
    }

    public revertUser() {
        this.user = cloneDeep(this.userBackup);
    }
}
</script>

Example.vue

<template>
    <div>
        <label>
            Name
            <input type="text" v-model="user.name" @input="$emit('update:user', user)" />
        </label>
        <label>
            Age
            <input type="text" v-model.number="user.age" @input="$emit('update:user', user)" />
        </label>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component({})
export default class Example extends Vue {
    @Prop() user: {
        name: string;
        age: number;
    };
}
</script>