Why are two classes in the same directory being imported differently in this Vue.js code? - vue.js

Question

I'm working my way through the code of a Vue.js project.
In the file src/model/TextSegment.js the first two lines are:
import UniqueObject from "./UniqueObject";
import { TimeCode } from "#/model";
The file UniqueObject.js is a class file in the same directory, and so I understand that the ./ simply means the same directory and loads this file for use in TextSegment.js which extends this class.
But the file TimeCode.js 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.:
import TimeCode from "./TimeCode";
Why is TimeCode in squiggly brackets?
Why does it have a # instead of a . as a directory?
src/model/UniqueObject.js
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;
src/model/TimeCode.js
class TimeCode {
constructor(initials = {}) {
this.seconds = initials.seconds || null;
this.frame = initials.frame || null;
}
}
export default TimeCode;
src/model/TextSegment.js
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;

Answer 1

There are several ways of importing in JavaScript. These are the two most common ones.
import UniqueObject from "./UniqueObject"; imports the default export variable. If you open the UniqueObject file you would most likely see something like export default <var>.
import { TimeCode } from "#/model"; imports the TimeCode variable in the file at #/model. If you open the model file you would see something like export const TimeCode.
The # has to do with your module loader and depends on which module loader you use.