Triggering a component dialog - vuejs2

Question

I'm attempting to learn VueJS and ElementUI to port over a legacy app. I'm very new to VueJS and am trying to get to grips with the basics. Understanding reusable components is going to be key for me, so I'm trying to get an example dialog working. Can someone help me work out why the dialog won't display when I click on the button on my Test page. I've registered the component but am unsure how I trigger it. The sample code is based on a tutorial for components I've found and ElementUI form example.
Test.vue
<template>
<el-button
type="success"
#click="dialogFormVisible = true"
size="small"
icon="el-icon-plus"
>click to open the Dialog</el-button>
<Dialog v-model="dialogFormVisible" />
</template>
<script>
import Dialog from "#/components/CustomerForm.vue";
export default {
name: "App",
components: { Dialog },
data() {
return {
dialogFormVisible: false,
};
},
methods: {
submit() {
console.log("confirm");
this.dialogFormVisible = false;
},
},
};
</script>
CustomerForm.vue
<template>
<el-dialog title="Customer Name" v-model="dialogFormVisible">
<el-form :model="form">
<el-form-item label="Activity name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="Activity zone">
<el-select v-model="form.region" placeholder="please select your zone">
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Zone two" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Activity time">
<el-col :span="11">
<el-date-picker
type="date"
placeholder="Pick a date"
v-model="form.date1"
style="width: 100%"
></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker
placeholder="Pick a time"
v-model="form.date2"
style="width: 100%"
></el-time-picker>
</el-col>
</el-form-item>
<el-form-item>
<el-button type="primary" #click="submit">Create</el-button>
<el-button>Cancel</el-button>
</el-form-item>
</el-form>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogFormVisible: false,
form: {
name: "",
region: "",
date1: "",
date2: "",
},
formLabelWidth: "120px",
};
},
methods: {
submit() {
console.log("submit!");
},
},
};
</script>