File Input Not Shows File Name Once It Is Hidden Using V-if

I am creating a vue web app, I have a simple file input, but there is some logic, due to which someone can hide or show the file input. Problem is once you hide the file input, and

Solution 1:

When you use v-if, the input is not hidden, it's removed from DOM.

To hide an element, use v-show instead:

<div id="app">
  <button @click="switch1=!switch1">switch1</button>
  <div v-show="switch1">
    <h4>Select an image</h4>
    <input type="file" @change="onFileChange">
  </div>
</div>