Hice una investigación bastante exhaustiva del tema, y basaré mi respuesta sobre el resultado obtenido en la misma.

En primer lugar, aunque ya se ha discutido la posibilidad de usar otro sistema de `locale` (por ejemplo `en-US`), eso no responde totalmente la pregunta.

Claramente deseas realizar la conversión de un tipo [`Number`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number) a un tipo [`String`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/String), pero que el mismo represente una cifra con formato local para `es-MX` (español de México).

Si hacemos uso del método [`toLocaleString()`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/toLocaleString), o del método [`NumberFormat`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/NumberFormat) del objeto [`Intl`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Intl), obtenemos como resultado lo siguiente:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    const number = 1200;
    const number2 = 12000;
    console.log(number.toLocaleString('es-MX')); // 1200
    console.log(new Intl.NumberFormat('es-MX').format(number)); // 1200
    console.log(number2.toLocaleString('es-MX')); // 12,000
    console.log(new Intl.NumberFormat('es-MX').format(number2)); // 12,000

<!-- end snippet -->

Claramente no coloca la coma decimal si la cantidad de dígitos para el grupo de miles es menor que 2.

**SOLUCIÓN**

Una forma de resolver este problema (digo problema, aunque no es un `bug` del lenguaje, sino una decisión de estandarización) es realizar manualmente la conversión del número, ya que el estándar no nos está aportando el resultado deseado.

En tu pregunta indicas que has visto muchas formas, pero ninguna te convence. La verdad es que *para gustos, los colores*.

Esta es mi propuesta, pero entiendo que puede hacerse de muchas otras formas.

Creamos nuestra propia función de formato, apoyados en la máquina de [Expresiones Regulares](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp) del motor de JavaScript.

Usaremos la siguiente expresión regular para dar formato a nuestro número en el lenguaje local deseado:

    const miRegEx = /(?=(\d{3})+(?!\d))/g;

En esta expresión regular se hace un `positive lookahead` (`?=`), buscando uno o varios (`+`) grupos de 3 dígitos (`(\d{3})+`), si los hay devuelve `match` junto con los valores agrupados en 3. Luego, se realiza un `negative lookahead` (`(?!)`) para descartar cualquier dígito que no sea agrupado por el primer grupo de captura (en este caso 1 o 2 dígitos). Puedes leer más sobre `lookahead` en [Regex Lookahead](https://www.regextutorial.org/positive-and-negative-lookahead-assertions.php).

Usaremos el método [`replace`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/replace) del objeto [String](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/String), el cual acepta una expresión regular (la cual ya tenemos) y un [parámetro de tipo `String`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/replace#Especificando_una_cadena_como_un_par.C3.A1metro) con el siguiente formato:

> `$n` ó `$nn` Donde n o nn son dígitos decimales positivos menores a 100, inserta la subcadena emparejada de orden n del paréntesis, proporcionado por el primer argumento del objeto RegExp.

Así, nuestro parámetro será el siguiente:

    $1,

Donde `$1` representa el primer argumento: nuestra expresión regular, y `,` es el símbolo de separación de miles que usaremos para este caso.

Por último, debemos tomar la decisión de si utilizamos siempre este método para sustituir el método `toLocaleString()` o podemos combinar ambos.

Supongamos que vamos a usar siempre este método para cualquier valor numérico válido:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    const numero = 123.456789;
    const numero2 = 1234.56789;
    const numero3 = 123456.789;
    const numero4 = 1234567.89;

    const formatoMexico = (number) => {
      const exp = /(\d)(?=(\d{3})+(?!\d))/g;
      const rep = '$1,';
      return number.toString().replace(exp,rep);
    }

    console.log(formatoMexico(numero));  // 123.456,789  <= NO VALIDO
    console.log(formatoMexico(numero2)); // 1,234.56,789 <= NO VALIDO
    console.log(formatoMexico(numero3)); // 123,456.789
    console.log(formatoMexico(numero4)); // 1,234,567.89

<!-- end snippet -->

Claramente tenemos un grave problema, ya que hay resultados no válidos.

El problema está en que el reemplazo se realiza sin tomar en cuenta que las posiciones decimales no deberían ser parte del reemplazo.

Para solucionar este problema tenemos algunas opciones, y como dije anteriormente: *para gustos, los colores*.

Como un número en Javascript sólo puede contener un carácter `.` o ninguno, usaremos esto para aplicar nuestra función sólo sobre la parte entera del número.

Vamos a separar la parte entera de la parte decimal, aplicamos el formato a la parte entera y luego concatenaremos nuevamente todo en un `String`.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    const numero = 123;
    const numero2 = 1234;
    const numero3 = 123.456789;
    const numero4 = 1234.56789;
    const numero5 = 123456.789;
    const numero6 = 1234567.89;

    const formatoMexico = (number) => {
      const exp = /(\d)(?=(\d{3})+(?!\d))/g;
      const rep = '$1,';
      let arr = number.toString().split('.');
      arr[0] = arr[0].replace(exp,rep);
      return arr[1] ? arr.join('.'): arr[0];
    }

    console.log(formatoMexico(numero));  // 123
    console.log(formatoMexico(numero2)); // 1,234
    console.log(formatoMexico(numero3)); // 123.456789
    console.log(formatoMexico(numero4)); // 1,234.56789
    console.log(formatoMexico(numero5)); // 123,456.789
    console.log(formatoMexico(numero6)); // 1,234,567.89

<!-- end snippet -->

Con esto tenemos una función que nos ayuda a convertir números a su representación de cadena en formato local de México (punto decimal y comas para separación de miles).

Modificando un poco este método podemos hacerlo para cualquier sistema de representación numérica que deseemos.

**¿Porqué `toLocaleString()` o `FormatNumber()` no colocan el símbolo de miles para cifras entre 1000 y 9999?**

Es una decisión tomada (no sé el motivo) por la organización de estandarización de [Unicode](https://home.unicode.org/basic-info/overview/). En particular por el proyecto [CLDR](http://cldr.unicode.org/) (siglas de _**C**ommon **L**ocale **D**ata **R**repository_).

En el [estándar](https://www.unicode.org/reports/tr35/tr35.html) se establece entre otras cosas, el patron de [formato numérico](https://www.unicode.org/reports/tr35/tr35-numbers.html#Number_Format_Patterns). Y dentro de ese patrón, existe una propiedad o atributo llamado [**`minimumGroupingDigits`**](https://www.unicode.org/reports/tr35/tr35-numbers.html#Examples_of_minimumGroupingDigits), la cual establece la cantidad de dígitos mínimos de un grupo para usar el separador de miles.

El hecho es que este valor es igual a 2 (como puede verse en [CLDR Survey Tool](https://st.unicode.org/cldr-apps/v#/es_MX/Symbols/70ef5e0c9d323e01)) en todos los formatos numéricos pertenecientes a la especificación `es` (que incluye a México).

Debido a esto, los métodos antes mencionados, siempre devolverán enteros de 4 cifras sin separador de miles.

Espero que esto aclare tu duda y te ayude a resolver el problema.