【Vue.js】あえてv-bind等の機能を使うか否か

いつもお世話になっております。
今本棚アプリを作っていて、以下のgifのようなボタンを押すと切り替わるフォームを作っています。（同じようなものがあと2つあります）

ご覧の通り赤いボタンを押すと「検索」から「直接入力」に切り替わるのですが、この際の表示を切り替える処理をv-bindやv-show(v-if)を使うのか、または素のJavaScriptを使って書くのかで迷っています。

ボタンを押すとある関数が発火し、現在その中で変数searchの真偽値を反転させて、それによりv-bind・v-showで表示を切り替えています。
しかし今回はそもそも切り替える内容が少ないので、そのために態々変数を用意したり、切り替え用のclassを新しく作ったり、テンプレート側に色々と記述しなくてもその関数の中でdocument.querySelector(element)～を使い値を直接操作してしまえば済む話で、更に処理も一箇所に纏められます。

私としましては、折角Vue.jsを使っている事ですし、テンプレート側にv-bind等を使って書けばその時点で誰が見ても処理の流れが分かるので明示的なのではないかと思う反面、前述の通りhtml・css・JavaScript全てに新しい記述をしなくてはならないのは各所にコードが増えてしまい微妙ではないか、とも思っています。

実務経験のない独学者のためイマイチどちらが正解かわからず、質問させていただきました。
実務ではどのような考えで実装するのか、教えていただけると幸いです。