Error: Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>
Solution 1:
You can use script tag in this way and it will work fine.
I was facing the same problem when I used <script></script> tag without specifying its type.
After using the type attribute Vue did not warn me for critical error:
<script type="application/javascript">
// your code
</script>
Solution 2:
I think the answer is in you question title. Just get rid of all the <script> tags in the template, put them outside of the template.
In this case you are using body as the template and you are putting scripts inside your template (body)
The easy solution is to change the el: 'body' to el: '#wrapper' and edit your html to
<body>
<div id="wrapper">
...
</div>
<script ... >
<script ... >
</body>