title: Vue Js how to use in mixins in single file template?
body: <p>Hi everyone im new to Vue JS and im trying to use mixins on my filters using single file template and I'm having some hard time</p>
  
  <p>Error I'm getting</p>
  
  <pre><code>Unknown custom element: &lt;side-bar-one&gt; - did you register the component correctly? For recursive components, make sure to provide the "name" option. 
  </code></pre>
  
  <p>component.js</p>
  
  <pre><code>Vue.component('sideBarOne', require('./component/sidebars/sideBarOne.vue'));
  </code></pre>
  
  <p>sideBarOne.vue</p>
  
  <pre><code>import { default as config } from '../../../config';
  import { filters as filter } from '../../../mixins/filters';
  
  export default {
          mixins: [
              filter,
          ],
          mounted: function() {
          }
   }
  </code></pre>
  
  <p>filters.js</p>
  
  <pre><code>import { default as config } from '../config';
  module.exports = {
      filters: {
          useLGLogo( str ) {
              if( str ) {
                  return config.LG_LOGO + str.replace(/\s+/g, '-').toUpperCase() + '.png';
              }
          },
          useMDLogo( str ) {
              if( str ) {
                  return config.MD_LOGO + str.replace(/\s+/g, '-').toUpperCase() + '.png';
              }
          },
          useSMLogo( str ) {
              if( str ) {
                  return config.SM_LOGO + str.replace(/\s+/g, '-').toUpperCase() + '.png';
              }
          },
      }
  };
  </code></pre>