title: Why are two classes in the same directory being imported differently in this Vue.js code?
body: <p>I'm working my way through the code of a Vue.js project.</p>
  
  <p>In the file <code>src/model/TextSegment.js</code> the first two lines are:</p>
  
  <pre><code>import UniqueObject from "./UniqueObject";
  import { TimeCode } from "@/model";
  </code></pre>
  
  <p>The file <code>UniqueObject.js</code> is a class file in the same directory, and so I understand that the <code>./</code> simply means the same directory and loads this file for use in <code>TextSegment.js</code> which extends this class.</p>
  
  <p>But the file <code>TimeCode.js</code> is also a class in the same directory, albeit one that is instantiated, but I would expect it to be loaded with the same syntax, e.g.:</p>
  
  <pre><code>import TimeCode from "./TimeCode";
  </code></pre>
  
  <ol>
  <li>Why is <code>TimeCode</code> in squiggly brackets?</li>
  <li>Why does it have a <code>@</code> instead of a <code>.</code> as a directory?</li>
  </ol>
  
  <h2>src/model/UniqueObject.js</h2>
  
  <pre><code>import uuidv4 from "uuid/v4";
  
  class UniqueObject {
    constructor(initial = {}) {
      if (this.constructor == UniqueObject) {
        throw TypeError("Cannot instantiate abstract class UniqueObject");
      }
      this.uuid = initial.uuid || uuidv4();
    }
  }
  
  export default UniqueObject;
  </code></pre>
  
  <h2>src/model/TimeCode.js</h2>
  
  <pre><code>class TimeCode {
    constructor(initials = {}) {
      this.seconds = initials.seconds || null;
      this.frame = initials.frame || null;
    }
  }
  
  export default TimeCode;
  </code></pre>
  
  <h2>src/model/TextSegment.js</h2>
  
  <pre><code>import UniqueObject from "./UniqueObject";
  import { TimeCode } from "@/model";
  
  class TextSegment extends UniqueObject {
    constructor(initials = {}) {
      super(initials);
      this.content = initials.content || "";
      this.translation = initials.translation || "";
      this.notes = initials.notes || "";
      this.timecode_start = new TimeCode(initials.timecode_start || {});
      this.timecode_end = new TimeCode(initials.timecode_end || {});
      this.voice_id = initials.voice_id || null;
      this.filename = initials.filename || "";
    }
  }
  
  export default TextSegment;
  </code></pre>