Vue.js를 사용하여 모달을 닫은 경우 모달 창의 데이터를 기본값으로 재설정하는 올바른 방법은 무엇입니까?

addServerWindow기본적으로 false로 설정된 속성 이 있습니다. 경우 addServerWindow거짓, A는 div어떤 집합을 렌더링 addServerWindow클릭하면 true로. 일단 addServerWindow참이면, 2 방향 데이터 바인드 입력이있는를 div포함하는가 form렌더링됩니다. 마지막으로 클릭시 false로 div설정 되는 절대 위치에있는 검은 색 화면 이 addServerWindow있습니다.

이제 검은 화면을 클릭하여 닫을 때 모달 창의 데이터를 재설정하는 가장 좋은 방법이 궁금합니다. 지금 사용자가 모달 창을 열고 입력에 무언가를 입력하고 모달을 닫은 다음 모달을 다시 열면 모달은 사용자가 이전에 입력 한 내용을 기억합니다. 사용자가 검은 색 화면을 클릭하면 모달 데이터를 재설정하고 싶습니다.

모든 속성을 하드 코딩하고 기본값으로 설정할 수있는 함수를 만들 수 있지만 이것이 올바른 방법인지 확실하지 않습니다.

내 템플릿의 일부 :

<div class='add-server' @click='addServerWindow = true'></div>

<div class="create-server-form-container" v-if='addServerWindow'>
    <form class="create-server-form" @submit='createServer($event)'>
        <div class="inputs-container">
            <div class="input-container">
                <label class='text-input-label' :for="serverName">server name</label>
                <input type="text" v-model="serverName" placeholder="Enter a server name">
            </div>
        </div>
        <div class="button-container">
            <button type="submit" name="button">Create</button>
        </div>
    </form>
    <div class="black-screen" @click='addServerWindow = false'></div>
</div>

스크립트 데이터 :

    data(){
    return {
        addServerWindow: false,
        serverName: ''
    }
},