<div class='toast' on:click='reload()'>
	Site has been updated — tap to reload
</div>

<style>
	.toast {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: rgb(170,30,30);
		color: white;
		padding: 1em;
		font-weight: 500;
		z-index: 99;
		animation: slide-up 0.4s ease-out;
	}
	@keyframes slide-up {
		0% { transform: translate(0,100%); }
		100% { transform: translate(0,0); }
	}
</style>

<script>
	export default {
		methods: {
			reload() {
				window.location.reload();
			}
		},
		setup(Toast) {
			Toast.show = () => {
				const target = document.createDocumentFragment();
				new Toast({ target });

				document.body.appendChild(target);
				Toast.show = () => {};
			};
		}
	};
</script>
<button class='toast' on:click='reload()'>
	Site has been updated — tap to reload
</button>

<style>
	.toast {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: rgb(170,30,30);
		cursor: pointer;
		color: white;
		padding: 1em;
		font-weight: 300;
	    	text-align: left;
	    	font-size: 16px;
		z-index: 99;
		animation: slide-up 0.4s ease-out;
	}
	@keyframes slide-up {
		0% { transform: translate(0,100%); }
		100% { transform: translate(0,0); }
	}
</style>

<script>
	export default {
		methods: {
			reload() {
				window.location.reload();
			}
		},
		setup(Toast) {
			Toast.show = () => {
				const target = document.createDocumentFragment();
				new Toast({ target });

				document.body.appendChild(target);
				Toast.show = () => {};
			};
		}
	};
</script>

Change from div to a button for better semantics
Change from div to a button for better semantics

Update the cursor to be a pointer as to indicate its clickable on a desktop