vue-js-medium.vue

<template>
  <div>
    <header-bar></header-bar>
    <main>
      <search-bar :submit="search" :term="searchTerm"></search-bar>
        <list-data v-for="item in list" :event="item"></list-item>
    </main>
    <footer-bar></footer-bar>
  </div>
</template>

<script>
import Vue from 'vue';

import { Search } from './components';
import { Header, Footer, List } from '~/shared';

import './styles.scss';

export default {
  name: 'Events',
  components: {
    'header-bar': Header,
    'search-bar': Search,
    'list-data': List,
    'footer-bar': Footer,
  },
  data() {
    return {
      data: [],
      searchTerm: {},
    }
  },
  created() {
    // API/Service calls would go here
    return {
      data: [
        {},
        {}
      ],
    };
  },
  methods: {
    search() {
      // Search method written here
    },
  }
};
</script>

Typo on <search-bar :submit="search" :term="searchTerm"></serach-bar>.