Cacher is the code snippet organizer for pro developers

<template>
  <div class="col-full">
    <h1>{{ category.name }}</h1>
    <p>{{ filterStr | uppercase }}</p>
    <CategoryListItem :category="category"/>
  </div>
</template>

<script>
  import CategoryListItem from '@/components/CategoryListItem' // a Vue file
  import sourceData from '@/data' // a data.json file
  
  export default {
    name: 'my-component-name',
    components: {
      CategoryListItem,
      SomeOtherComponent
    },
    data () {
      return {
        dataUsageNote: 'data must be a function that returns an object',
        filterStr: 'this is a filter test',
        people: ['Arnie','Barney','Charlie','Darlene']
        // Notice that we don't have a data prop for sourceData. We only read from that in other places.
      }
    },
    props: ['prop1','prop2','prop3'],
    props: {
      id: {
        required: true,
        type: String
      },
      timestamp: {
        required: true,
        type: Number
      }
    },
    computed: {
      // Create new data based on existing data
      category () {
        return sourceData.categories[this.id]
      }
    },
    filters: {
      upperCase (key) {
        return key.toUpperCase()
      }
    },
    methods: {
      eventExample () {
        // 2nd param is the value
        this.$emit('myCustomEvent', 'your event value')
        
        // 2nd param is an object, with props the same name as values
        this.$emit('myCustomEvent', { mssg, date, color} ) 
        
        // In parent: <component @myCustomEvent="someParentMethod($event)" />
      }
    }
  }
</script>

<style scoped>
</style>

<style lang="sass" scoped>
  $red: red;
  h1 {
    color: $red;
  }
</style>