Так не заработает. Надо оформлять код в компоненту, или юзать https://ru.vuejs.org/v2/guide/components-edge-cases.html#Inline-%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D1%8B
Но лучше всё писать в компонентах

+ к предыдущему ответу, если вы юзаете vue, вам вряд ли понадобится jquery, поэтому уберите $(function () {...})

только в этом коде или вообще нет смысла оба тянуть? так то для простых вещей проще jquery

я не фронтендер ни разу, но если я правильно понимаю концепты vue и других фреймворков, они сами разбираются, когда им начинать работать, и в данном случае jquery только лишний.
грубо говоря, весь концепт vue/react/angular построен на реактивности и если у вас есть потребность сделать условный $.on('click' ...), то вы делаете что-то не так в рамках концепции реактивных фреймворков. а условные дропдауны и прочие общеиспользующиеся кейсы использования плагинов jquery уже давно переписаны умельцами и например есть тот же react-bootstrap/reactstrap (я недавно ковырял реакт, поэтому вспомнились).
я недавно распиливал один монолит на апи+реакт-фронт, я первым делом выкинул все лишнее вроде jquery как раз, и мой js по ощущениям стал работать куда прозрачнее

upd.
ну то есть, если в примере условного дропдауна вам нужно было бы сделать $.on('click',  { smth.toggleClass('hidden') }), то в рамках реактивного фреймворка этот обработчик биндится прямо в компоненте, а toggleClass заменяется на className += this.props.что-то ? 'hidden' : '', а это свойство меняется как раз в обработчике

+

нечем не проще на самом деле

вуй всегда можно прикрутить глобально и использовать базовые вещи по типу событий и реактивности. Все остальное уже по необходимости

и вообще проще нативный Js использовать вы чего вообще люди :D

да все говорят об этом, а где прочитать не могу найти, в доках только дефолтное поведение на своих решениях, видать где-то глубоко запрятали. Пока для меня симпатичнее html оставить бэкенду, а JS как в старые добрые времена, ловит его и дальше уже сам решает что делать, а не как сейчас чтоб JS c нуля собирал html что все кулеры крутятся. у меня малый процент динамического html, зачем мне весь html виртуальный)

да как раз таки не нужно так

ну чтобы собирался

https://ru.vuejs.org/v2/guide/

Там прям в самом начале показывается настройка в базовом варианте

пока вижу только что вью просит для себя данные и логику будет делать сам. я же хочу чтоб логику показал бэкенд, а дальше свистелкой помогал фронтенд)

например? Можешь описать задачу? Или выше есть?

тут больше про старый проект, которые весь в jquery и хотят какой сложный калькулятор на все страницы, который легче всего написал на VUE, на выходе две либы. Дальше продавать клиенту чтоб выпелить jquery, но какие-то мелочи и ты должен полсайта переписать, чтоб vue тебя понял

да нет же :D. Просто блок с калькулятором делаешь вуевым и все :D

про то чтобы заменять  одно на другое и заниматься переписыванием, ну это логично и если нету на это времени, просто не занимайся этим. Если продал клиенту то что нужно выпилить одно и вставить другое, логично что за пару кликов ты это не сделаешь

а если новый проект? тоже jquery для простых вещей, а для сложных форм vue?) или только со старыми проектами так?) вот и не пойму границу)

если новый проект  - пиши только на вуе. Если старый и есть моменты где вуе лучше - просто используй там вуе

так след простой модуль будет на vue или jquery по привычке? а калькулятор был лишь исключением? не хочется зоопарк